|
JavaScript - Button Then Input In Textbox
What I want is when the button 'Total' is pressed, the total frame the pictures and frames appears in the textbox.
Here is the code (sorry, it's long): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="jquery-1.3.2.js"></script> <title>Ivis's Picture Gallery</title> <script language="javascript"> var price1, price2, price3, price4, price5, price6, price7, price8, price9, price10; function price() { price1 = document.getElementById("price1").innerHTML=price1; price2 = document.getElementById("price2").innerHTML=price2; price3 = document.getElementById("price3").innerHTML=price3; price4 = document.getElementById("price4").innerHTML=price4; price5 = document.getElementById("price5").innerHTML=price5; price6 = document.getElementById("price6").innerHTML=price6; price7 = document.getElementById("price7").innerHTML=price7; price8 = document.getElementById("price8").innerHTML=price8; price9 = document.getElementById("price9").innerHTML=price9; price10 = document.getElementById("price10").innerHTML=price10; } function total() { var text = document.getElementById("txt1").value; text = bigImage + bigFrame; } function changeImageZebra() { $("#bigImage").hide(); $("#bigImage").attr("src", "ZooZebra.gif"); $("#bigImage").fadeIn(3000); } function changeImageTiger() { $("#bigImage").hide(); $("#bigImage").attr("src", "tiger.jpg"); $("#bigImage").fadeIn(3000); } function changeImageGraff() { $("#bigImage").hide(); $("#bigImage").attr("src", "graff.jpg"); $("#bigImage").fadeIn(3000); } function changeImageBDog() { $("#bigImage").hide(); $("#bigImage").attr("src", "boys with dog.jpg"); $("#bigImage").fadeIn(3000); } function changeImageSeal() { $("#bigImage").hide(); $("#bigImage").attr("src", "seal.jpg"); $("#bigImage").fadeIn(3000); } $(document).ready(function(){ $("#zebPic").mouseover(changeImageZebra); $("#tigPic").mouseover(changeImageTiger); $("#graffPic").mouseover(changeImageGraff); $("#bdogPic").mouseover(changeImageBDog); $("#sealPic").mouseover(changeImageSeal); }); function changeFrame1() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square.png"); $("#bigFrame").fadeIn(3000); } function changeFrame2() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square2.png"); $("#bigFrame").fadeIn(3000); } function changeFrame3() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square3.png"); $("#bigFrame").fadeIn(3000); } function changeFrame4() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square4.png"); $("#bigFrame").fadeIn(3000); } function changeFrame5() { $("#bigFrame").hide(); $("#bigFrame").attr("src", "square5.png"); $("#bigFrame").fadeIn(3000); } $(document).ready(function(){ $("#frame1").mouseover(changeFrame1); $("#frame2").mouseover(changeFrame2); $("#frame3").mouseover(changeFrame3); $("#frame4").mouseover(changeFrame4); $("#frame5").mouseover(changeFrame5); }); </script> </head> <body><h1>Frames</h1> <p> </p> <p><img src="ZooZebra.gif" id="zebPic" alt="" width="50" height="50" /><div id="price1">$100</div></p> <p><img src="tiger.jpg" id="tigPic" alt="" width="50" height="50" /><div id="price2">$110</div></p> <p><img src="graff.jpg" id="graffPic" alt="" width="50" height="50" /><div id="price3">$120</div></p> <p><img src="boys with dog.jpg" id="bdogPic" alt="" width="50" height="50" /><div id="price4">$130</div></p> <p><img src="seal.jpg" id="sealPic" alt="" width="50" height="50" /><div id="price5">$140</div></p> <p> </p> <hr /> <p> </p> <div id="sq1"><img src="square.png" id="frame1" width="100" height="100" /> Frame1</div><div id="price6">$50</div> <div id="sq2"><img src="square2.png" id="frame2" width="100" height="100" /> Frame2</div><div id="price7">$60</div> <div id="sq3"><img src="square3.png" id="frame3" width="100" height="100" /> Frame3</div><div id="price8">$70</div> <div id="sq4"><img src="square4.png" id="frame4" width="100" height="100" /> Frame4</div><div id="price9">$80</div> <div id="sq5"><img src="square5.png" id="frame5" width="100" height="100" /> Frame5</div><div id="price10">$90</div><hr /> <p> </p> <p><img src="ZooZebra.gif" name="bigImage" align="top" id="bigImage" /><img src="square.png" name="bigFrame" id="bigFrame" /></p> <p> <label> <input type="button" name="btn1" id="btn1" value="Total" onclick="total()" /> </label> <label> <input type="text" name="txt1" id="txt1" /> </label> </p> <p> <input type="button" name="btn2" id="btn2" value="To Checkout" /> </p> <p> </p> [<a href="galleryindex.htm">Back</a>] </body> </html> Similar TutorialsHi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
<html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript'> <script type = 'text/javascript'> function unselectall(form) { var i=0; for(i=0;i<=15;i++) { tdname = 'invbox'+i; if (document.getElementById && document.getElementById(tdname).style) { document.getElementById(tdname).style.borderColor = '#000000'; form.selected.value = 0; } else { i=20; } } } function selectthis(form, pos) { unselectall(form); var tdname = 'inventory'; document.getElementById(tdname).style.borderColor = '#ffff00'; form.selected.value = form.position1.value; } </script> </head> <body> <form id='inventorytable' method='post' action='addflowerlight.php'> <table id='inventory' border=1> <tr> <td id = 'invbox1' ><img src = 'images/Lights/6inv.jpg' onclick="selectthis('inventorytable', 1);"><input type = 'text' id = 'position1' value='6'></td></tr></table> <input type ='text' id='selected'> <input type ='submit' value='Equip Light'> </form> </body> </html> What am I doing wrong? The onclick wont trigger. Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks Hello, I am new to JavaScript and I am asking for help with this problem. I have a three textboxes in a form. Using OnBlur, I am attempting to call a function to add one to an input textbox to add 1 to the cost. As the user enters text into textbox01, the number 1 appears in the input box about cost, as the user enters text into textbox02, the input box displays 2 and the user enters text into textbox03, the input box displays 3. My JavaScript is as follows: <script type="text/javascript"> //copies contents of first textbox to second textbox function copyValue() { var textbox1 = document.getElementById("textbox1"); var textbox2 = document.getElementById("textbox2"); var textbox3 = document.getElementById("textbox3"); var txtAttendee = document.getElementById("txtAttendee"); var input_A = document.getElementById("input_A"); textbox2.value = textbox1.value; txtAttendee.value = 1; input_A.value = 1; } </script> In the form I have this: <input type="text" id="textbox3" style="background-color:yellow" onblur="copyValue();" /> I would greatly appreciate ANY help with being able to calculate costs, perhaps using the JavaScript ++/-- operators. Thank you in advance for your time and assistance. I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. hi, i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button. is there a way to disable this textbox thru javascript? thnx Hi! I am quite new to the world of JavaScript as I have done basic corse for it... and I have learnt that best way to understand it is to play around with it... but now I am stuck with on of the problem!! Problem: How can we assign text box input values by user to a variable and display that variable back on another element of the same HTML document(dynamically)... Conditions: The value has to be stored as a JavaScript variable only. No server-side script is to be used and has to be done locally. Please help! Hey guys, I Should have the textbox value as my radio button value. For example, if I type "5" in the textbox, then the radio button value would change to "5". by the way I have three radio buttons and one textbox and if I select one of those and type something in the text box the value would replace to radio button which is selected and all this have to happen before the page submitted or in the process of submitting. I hope I could find answers here (It's so important for me to solve this problem, For see the form please go to this page, Its above the news frame where you can see three radio buttons and one textbox named shipment tracking ...). thanks so much!!!
Hey Guys, I have this really important question (I'm really stuck! I'm a baby coder ). I have four radio button and four textbox, each one of these textboxes has its own value which is provided from a database, now each one of these textboxes is related to a radio button and what happen is if I select radio button number one then the value of textbox number one is going to change by which is fine but when I'm going to select the other radio buttons (which is obvious that radio button number one is no longer selected) but textbox number one keeps the changed value and don't going back to its default value. let me give you my example (which I working on it right now), I have four textbox and four radio buttons, now my first textbox has a value="1" I select the first radio button and the first textbox value turned to value="2" now I select the second radio button and the second text value change from 1 to 2 just like the first text box (what happened is that the first radio button is deselected but the first textbox value didn’t turn back to its first value which was value="1" and keep the changed value which is value="2" (that happens to all text boxes and radio buttons as well) This is my stupid code: (please help me out here, I'm going to cry, Btw you can completely change the code if you want it’s not important I just need to restore these textbox to their first value if their related radio buttons is no longer selected. one more thing I manage to find a way to do that but I find out it is not stable (onblur) if I click somewhere else in the page (rather than the radio buttons) then the changed value return to default one which is SUCKS! I checked the other event handlers but didn’t work! <script type="text/javascript"> function firstaddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)+1%>" }} </script> <script type="text/javascript"> function secondaddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)+1%>" }} </script> <script type="text/javascript"> function thirdaddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)+1%>" }} </script> <script type="text/javascript"> function fourthaddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)+1%>" }} </script> <script type="text/javascript"> function ReturnFirstAddit(){ if(document.getElementById("Rate1").value=="1") { document.getElementById("amount1").value="<%=(rs_vote.Fields.Item("Rate1").Value)%>" }} </script> <script type="text/javascript"> function ReturnSecondAddit(){ if(document.getElementById("Rate2").value=="2") { document.getElementById("amount2").value="<%=(rs_vote.Fields.Item("Rate2").Value)%>" }} </script> <script type="text/javascript"> function ReturnThirdAddit(){ if(document.getElementById("Rate3").value=="3") { document.getElementById("amount3").value="<%=(rs_vote.Fields.Item("Rate3").Value)%>" }} </script> <script type="text/javascript"> function ReturnFourthAddit(){ if(document.getElementById("Rate4").value=="4") { document.getElementById("amount4").value="<%=(rs_vote.Fields.Item("Rate4").Value)%>" }} </script> Choice 1: <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> Choice 2: <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> Choice 3: <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> Choice 4: <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice1").Value)%> <input type="radio" value="1" name="Rate" id="Rate1" onclick="firstaddit()" onblur="ReturnFirstAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice2").Value)%> <input type="radio" value="2" name="Rate" id="Rate2" onclick="secondaddit()" onblur="ReturnSecondAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice3").Value)%> <input type="radio" value="3" name="Rate" id="Rate3" onclick="thirdaddit()" onblur="ReturnThirdAddit()"> <br/><br/> <%=(rs_vote.Fields.Item("Choice4").Value)%> <input type="radio" value="4" name="Rate" id="Rate4" onclick="fourthaddit()" onblur="ReturnFourthAddit()"> <br/><br/> hi.. i have a jsp page in which there is a table. the number of rows is variable and depends on a pre-defined query. every row has 2 editable textboxes which are initially disabled. i need to activate these textboxes according to the radio button which corresponds to the particular row in question. can anybody pls tell me how to do that. the code that i have written is as follows.if there is any tweaking to be done pls suggest the same. code: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page import="java.util.ArrayList" %> <%@page import="DTO.UserGroupDTO"%> <html> <head> <script type="text/javascript">} funtion enable(){ document.getElementById("inp1").disabled=false; document.getElementById("inp2").disabled=false; } function disable(){ document.getElementById("inp1").disabled=true; document.getElementById("inp2").disabled=true; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Update User Group Inquiry Results</title> </head> <body bgcolor="#aabbcc"> <center> <h3>Update User Group Inquiry Results</h3><br><br> <%ArrayList arrayList=(ArrayList)request.getAttribute("myList"); ArrayList list; int size=arrayList.size(); Integer groupId=null; String userGroupName=null; String description=null; %> <form action="/test/BankServlet"> <table style="color: highlight" border="5"> <% if(!(arrayList.isEmpty())){%> <tr><th>Group ID</th><th>User Group Name</th><th>Description</th><th>Selection</th></tr> <% for(int i=0;i<size;i++){ UserGroupDTO userGroupDTO=(UserGroupDTO)arrayList.get(i); userGroupName=userGroupDTO.getUserGroupName(); groupId=userGroupDTO.getGroupId(); description=userGroupDTO.getDescription(); %> <tr> <td><%out.println(groupId); %></td> <td><input id="inp1" disabled="disabled" value="<% out.println(userGroupName); %>"></td> <td><input id="inp2" disabled="disabled" value="<%out.println(description); %>"> </td> <td> <input type="radio" name="radio2" value="<%=groupId %>" onclick="enable()"> </td> </tr> <% } } else{ out.println("No match found"); } %> <tr> <td><input type="hidden" name="strTitle" value="UpdateUserGroup"></td> </tr> <tr> <td><input type="hidden" name="value" value="<%=groupId%>"></td> </tr> </table><br> <input type="submit" value="Update User Group" style="background-color: gray"> </form> <form action="/test/jsp/UserGroup.jsp"> <input type="submit" value="Go Back to User Group Operations Page" style="background-color: gray"> </form> <br><br><br><br> </center> </body> </html> I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement Hi.. I just want to know how does it happen that when I scan the barcode using barcode scanner it will automatically put on the first textbox, then the focus will go to the next textbox and on the last textbox will automatically save the data to database. here is my sample form. PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); $sr_date =date('Y-m-d H:i:s'); $sql = "SELECT sr_number FROM receiving_materials ORDER BY sr_date DESC LIMIT 1"; $result = mysql_query($sql, $con); if (!$result) { echo 'failed'; die(); } $total = mysql_num_rows($result); if ($total <= 0) { $currentSRNum = 1; $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } else { //------------------------------------------------------------------------------------------------------------------ // Stock Number iteration.... $row = mysql_fetch_assoc($result); $currentSRNum = (int)(substr($row['sr_number'],0,3)); $currentSRYear = (int)(substr($row['sr_number'],2,2)); $currentSRMonth = (int)(substr($row['sr_number'],0,2)); $currentSRNum = (int)(substr($row['sr_number'],6,4)); $currentYear = (int)(date('y')); $currentMonth = (int)(date('m')); $currentDay = (int)(date('d')); $currentSRYMD = substr($row['sr_number'], 0, 6); $currentYMD = date("ymd"); if ($currentYMD > $currentSRYMD) { $currentSRNum = 1; } else { $currentSRNum += 1; } } //------------------------------------------------------------------------------------------------------------------ $yearMonth = date('ymd'); $currentSR = $currentYMD . sprintf("%04d", $currentSRNum); ?> <html> <title>Receiving Materials</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css" /> <style type="text/css"> #SR_date{ position: relative; font-family: Arial, Helvetica, sans-serif; font-size: .9em; margin-left: 10px; width: auto; height: auto; float: left; top : 10px; } </style> </head> <body> <form name="receiving_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div id="SR_date"> <label>Date :</label> <input type="text" name="sr_date" value="<?php echo $sr_date; ?>" size="16" readonly="readonly" style="border: none;"> </div> <div id="SR_number"> <label>RM# :</label> <input type="text" name="sr_number" value="<?php echo $currentSR; ?>" size="9" readonly="readonly" style="font-weight: bold; border: none;"> </div> <div id="SI_number"> <label class="LLabelRM">SI/DR# :</label> <input type="text" name="si_num" id="si_num" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelRM">Supplier Name :</label> <input type="text" name="s_name" id="s_name" class="LFieldRM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">PO # :</label> <input type="text" name="po_num" id="po_num" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Quantity :</label> <input type="text" name="qty" id="qty" class="LFieldSec1RM" value="" size="25"> <br/> <br/> <label class="LLabelSecRM">Material Code :</label> <input type="text" name="mat_code" id="mat_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">Material Desc. :</label> <input type="text" name="mat_desc" id="mat_desc" class="LFieldSec1RM" value="" size="25"> <br/></br/> <label class="LLabelSecRM">WH Code :</label> <input type="text" name="wh_code" id="wh_code" class="LFieldSecRM" value="" size="25"> <label class="LLabelSecRM">BIN Location :</label> <input type="text" name="bin_loc" id="bin_loc" class="LFieldSec1RM" value="" size="25"> </div> </form> </body> </html> Thank you Hi all, I am working with a php code that I am trying to edit a bit. The last part I am trying to change I cannot figure out. Essentially I want to change the "Login" submit button to just a text link that says "Login" instead. Quote: <form action="<?php echo JRoute::_( 'index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login" > <?php echo $params->get('pretext'); ?> <input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="15" value="<?php echo JText::_('Username') ?>" onclick="login.username.value='';" /> <input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="15" alt="password" value="<?php echo JText::_('Password') ?>" onclick="login.passwd.value='';" /> <?php if(JPluginHelper::isEnabled('system', 'remember')) : ?> <label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label> <input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" /> <?php endif; ?> <input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" /> <?php I am hoping this is just a minor change. Would someone mind showing me what I have to do? Thanks very much. I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button. (Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.) The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas? Code: <script type="text/javascript">
function changerepeat(theval) {
alert("changerepeat called");
document.forms[0].elements[0].value = theval;
}
function tellme() {
alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>
Thanks very much for reading! I'm trying to reduce the height of input buttons, but am unable to center the text vertically. Tried every css trick I know, but the text is still too low (I can make it lower :P). Any way to do this?
MY PROBLEM: The problem is with 3 radio buttons - each of which changes the view of the current page by passing parameters to the end of the page url. Code: <td>
<input id="vall" tabindex="0" type="radio" name="sortview" value="all" onClick=" changeView(''); "></input>
</td>
function changeView(viewNumber) {
// First, we break the current URL into variables
var hurl = window.location.hostname;
var purl = window.location.pathname;
var surl = window.location.search;
// Then we reconstruct them
var url = hurl+purl;
// If there are parameters on the end of the URL
if (surl.indexOf("?") != -1) {
// And we are requesting a specific view of the "Opt In" field
if (viewNumber) {
// Strip the ? from the front of the parameters
var oldParam = surl.split("?");
// If any of the parameters are "opt"
if (surl.indexOf("opt") != -1){
// Then reconstruct the parameters with the requested view (how??)
}
url = "http://" + url + "?opt=" + viewNumber + oldParam[1];
}
else {
url = "http://" + url;
}
alert("opt found in url: " + surl);
window.location.href = url;
}
else{
if (viewNumber) {
url = "http://" + url + "?&opt=" + viewNumber;
}
else {
url = "http://" + url;
}
alert("opt not found: " + url);
window.location.href = url;
}
}
Is this even the most efficient way of doing this? I feel like there must be a better way. Hi guys, I'm trying to add a php string to some javascript: document.getElementById("button").value = mygetrequest.responseText; basically there are a load of buttons on one page. So i need to add a value at the end of button. Basically the ID of each row so button<? echo $row['ID']; ?> but i'm not too sure how i would do this in javascript. Any help Thanks in advance Below is a script I found at http://bytes.com/topic/javascript/an...cookie-problem The idea is a like button, like on fb, in a form which updates a db field I can use to display the number of likes, and my goal is to disable the like button for the rest of the session, or a day, or whatever. This script disables it onclick, the problem is I can't figure out how to get it to submit the form as well. I have found it does submit if the input type is 'submit', but then it doesn't call the disable function. I tried writing another function to submit the form but no go. Code: <html>
<head>
<title>Vote Button</title>
<script type="text/javascript">
function checkForVote()
{
// If there is a cookie...
if(document.cookie != "")
{
if(getCookie("voted") == 1)
{
// Disable the button again if user already voted.
disableButton();
}
}
}
function disableButton()
{
var submitvote = document.getElementById("submitvote");
submitvote.disabled = true;
submitvote.value = "You Already Voted.";
}
function setCookie(name, value, days)
{
if(days)
{
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires = " + date.toGMTString();
}
else
{
var expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
// Disable the button as soon as the user clicks it.
disableButton();
}
function getCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0)
{
return c.substring(nameEQ.length,c.length);
}
}
return null;
}
</script>
</head>
<body>
<form name="voteform" id="voteform" action="foo.php" method="post">
<input type="button" name="submitvote" id="submitvote" onclick="setCookie('voted', 1, -1);" value="Submit Vote"/>
</form>
</body>
<script type="text/javascript">
// Run checkForVote() at end of document so that form and contents can be referenced
window.onload = checkForVote();
</script>
</html>
Hey I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far... Many thanks in advance for advice or pointers [CODE][ICODE] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Order Form for Joe's Fruit Shop</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="author" content="Cherie_ONeill"> <style type="text/css"> body {font-family:arial;color:#000000;font-size:10px;} h4 {font-style:italic;} .input {font-size:10px;color:#483D8B;} </style> <script type='text/javascript'> function formValidator() { // Make quick references to our fields var fullname = document.getElementById("fullname"); var stnumber = document.getElementById("stnumber"); var address = document.getElementById("address"); var suburb = document.getElementById("suburb"); var state = document.getElementById("state"); var postcode = document.getElementById("postcode"); var phone = document.getElementById("phone"); var email = document.getElementById("email"); // Check each input in the order that it appears in the form! if(isAlphabet(fullname, "Please enter letters only for your name")){ if (isNumeric(stnumber, "Please enter numbers only for your house number")){ if(isAlphanumeric(address, "Please enter your street name")){ if(isAlphabet(suburb, "Please enter letters only for your suburb")){ if(madeSelection(state, "Please Choose a State")){ if(isNumeric(postcode, "Please enter a valid postcode")){ if(lengthRestriction(postcode, 4, 4)){ if(isNumeric(phone, "Please enter a valid phone")){ if(lengthRestriction(phone, 10, 10)){ if(emailValidator(email, "Please enter a valid email address")){ return true; } } } } } } } } } } return false; } //ensure all fields are filled but this funtion may not be required on this form function notEmpty(elem, helperMsg) { if(elem.value.length == 0) { alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } //ensures a field is numeric only function isNumeric(elem, helperMsg) { var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field contains letters only function isAlphabet(elem, helperMsg) { var alphaExp = /^[a-zA-Z _]+$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //ensures a field has both numbers & letters function isAlphanumeric(elem, helperMsg) { var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/; if(elem.value.match(alphaExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //restricts the amount of digits required in a numeric field function lengthRestriction(elem, min, max) { var uInput = elem.value; if(uInput.length >= min && uInput.length <= max) { return true; } else { alert("Please enter between " +min+ " and " +max+ " characters"); elem.focus(); return false; } } //validates a selection has been made from the select lists function madeSelection(elem, helperMsg) { if(elem.value == "Please Choose") { alert(helperMsg); elem.focus(); return false; } else { return true; } } //validates the email address function emailValidator(elem, helperMsg) { var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)) { return true; } else { alert(helperMsg); elem.focus(); return false; } } //resets the form function formReset() { document.getElementById("orderForm").reset(); } </script> </head> <body> <h2>Order Form</h2> <h4>* Indicates required fields.</h4> <h4>Your details:</h4> <form name="orderForm" id="orderForm" onsubmit="return formValidator()"> <p>* Name: <input id="fullname" name="fullname" class="input"></p> * Number: <input id="stnumber" size="5" class="input"> * Address: <input id="address" name="address" class="input"></p> <p>* Suburb or Town: <input id="suburb" name="suburb" class="input"> * State: <select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> * Postcode: <input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p> <p>* Home phone: <input name="phone" id="phone" maxlength="10" size="10" class="input"></p> <p>* Email: <input name="email" id="email" value="enter your current email address" class="input"></p> <br> <h4>Purchase details</h4> <p>* Basket choice: <select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select> Quantity: <select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p> <p>* Deliver to:</p> <input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br> <input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label> <br> <br> <input type="text" name="address2" id="address2" class="input"> (Street) <input type="text" name="suburb2" id="suburb2" class="input"> (Suburb/Town) <select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select> (State) < input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input"> (Postcode) <br> <input type="submit" value="Submit"> <input type="button" onclick="formReset()" value="Reset"> </form> </body> </html> Hi Guys, I'm fairly new to Javascript and would be grateful for any help you can give me. I've had a search on Google and found a couple of potential solutions but nothing seems to work quite right for what I need. Basically I have a form with several questions followed by Yes/No radio buttons. Dependent on which answer is given, I want to display a different message above the text box. For example, if you answered 'no' to a certain question then the message above the text box would change to say "Please fill in additional information" or something along those lines. Below is the HTML to give you an idea of what I mean. Code: <table> <tr> <td> </td> <td><label class="bold">Yes</label></td> <td><label class="bold">No</label></td> </tr> <tr> <td><label for="property_q1"> - Is this your house?</label></td> <td><input name="property_q1" id="property_q1" type="radio" value="Yes" /></td> <td><input name="property_q1" id="property_q1" type="radio" value="No" /></td> </tr> </table> <br /> <div id="fine">It's fine, don't worry about filling it in.</div> <div id="fill" style="display:none">Please fill in the form below.</div> <table> <tr> <td> </td> </tr> <tr> <td><textarea name="info" id="info" cols="60" rows="5"></textarea></td> </tr> </table> <input type="submit" /> |
|||||||