|
JavaScript - How Can I Disable Some Form Fields When Selecting Others
Greetings experts, this is my first time here.
So, please take easy on me. I have makup with 2 sections. The first section contains 5 form fields and are required. The second second has 2 form fields and are optional. Users can only choose from one section or the other but not both. The js script below ensures that if users select from section 2, section one will not challenge for validation and works a treat. The challenge I have now is to ensure that if users choose from section 1, the 2 form fields in section are automatically disabled so they won't be attempted to choose from it. Similarly, if users select from section 2, all form fields in section one are automatically disabled so they won't be tempted to choose from that section. Is this possible? If not possible, is it possible to raise an error? For instance, a user selects from section 1 and attempts to select from any of the 2 form fields in section 2, a message that says, "You can only select from one section but from both. Similarly if a user selects from section 2 first, same thing happens. Thanks very much for your assistance. function validate() { if(document.getElementById("<%=txtrequest.ClientID%>").value != "" && document.getElementById("<%=txtreceived.ClientID %>").value != "") { if (document.getElementById("<%=txtName.ClientID%>").value == "") { alert("Please enter name"); document.getElementById("<%=txtName.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtCity.ClientID %>").value == "") { alert("Please enter city"); document.getElementById("<%=txtCity.ClientID %>").focus(); return false; } if (document.getElementById("<%=txtState.ClientID%>").value == "") { alert("Please enter state"); document.getElementById("<%=txtState.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtZip.ClientID%>").value == "") { alert("Please enter zip"); document.getElementById("<%=txtZip.ClientID%>").focus(); return false; } if (checkradio() == false) { alert("Please enter contacts"); document.getElementById("<%=txtContacts.ClientID%>").focus(); return false; } } return true; } Similar Tutorialshi again hi i want to create a form Form have 2 submit buttons also have one drop down list when selecting dropdown list item disable the one submit button plzzzzzz help m for do this with sample code needed. I have 10 feedburner feeds that are for different categories on a wordpress site. I would like to modify the subscribe form code feedburner supplies to include radio buttons to select which of the feeds to subscribe to. Code: <HTML>
<HEAD>
<TITLE> Radio Window </TITLE>
<script>
function OpenWindow(){
for(i=0;i<document.FormName["RB1"].length;i++){
if(document.FormName["RB1"][i].checked){
window.open(document.FormName["RB1"][i].value);
break;
}
}
}
</script>
</HEAD>
<BODY>
<form name="FormName" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="OpenWindow()";return true">
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed1&loc=en_US">Option 1<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed2&loc=en_US">Option 2<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed3&loc=en_US">Option 3<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed4&loc=en_US">Option 4<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed5&loc=en_US">Option 5<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed6&loc=en_US">Option 6<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed7&loc=en_US">Option 7<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed8&loc=en_US">Option 8<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed9&loc=en_US">Option 9<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed10&loc=en_US">Option 10<BR>
<input type="submit" value="Subscribe">
</form>
</BODY>
</HTML>
This is the code I have put together searching the web, when hitting the subscribe button after entering a email address and selecting an option it load two new windows, one for the relevant feed but does not transfer the email address entered in the text box. The second for to http://feedburner.google.com/fb/a/mailverify All help would be greatly received. In this Form field, when I select the field box that shows "Enter Text" I'd like it so the text disappears, so I can begin typing in a cleared field box. This is the line of code, I believe, that has to do with that function. Any help with having the Enter Text clear upon selecting, will be appreciated: Code: <input autocomplete="off" id="keyword" name="keyword" value="Enter Text" onclick="clickclear(this, 'Enter Text')" onblur="clickrecall(this,'Enter Text')" /> I'm new at JavaScript and not sure if what I want to do is possible. This is part of the code from a larger check-in form. This code adds a new row as needed and should also enable the text fields only after the check box is selected. It is not working as expected and I am missing what the problem may be or if this is even possible. Any help would be appreciated. [CODE] <!DOCTYPE html> <html lang="en"> <title></title> <script type="text/javascript"><!-- function addRow() { tabBody=document.getElementById("data"); row=document.createElement("TR"); cell1 = document.createElement("TD"); checknode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0"); checknode2 = document.createElement("input"); checknode2.name="guest[]"; checknode2.id='guest[]'; checknode2.type="checkbox"; checknode2.setAttribute('onclick', 'disablefields();'); cell2 = document.createElement("TD"); textnode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); textnode2=document.createElement("input"); textnode2.type="text"; textnode2.name='guestc[]'; textnode2.id='guestc[]'; textnode2.setAttribute('disabled',''); textnode2.size="7"; textnode2.maxlength="9"; textnode2.setAttribute('onkeyup', 'this.value = this.value.toUpperCase();'); cell3 = document.createElement("TD"); textnode3=document.createElement("input"); textnode3.type="text"; textnode3.name="guestn[]"; textnode3.id='guestn[]'; textnode3.setAttribute('disabled',''); textnode3.size="20"; textnode3.maxlength="30"; cell4 = document.createElement("TD"); checknode3 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"); checknode4 = document.createElement("input"); checknode4.name="food[]"; checknode4.id='food[]'; checknode4.type="checkbox"; checknode4.value="breakfast"; cell1.appendChild(checknode1); cell1.appendChild(checknode2); row.appendChild(cell1); tabBody.appendChild(row); cell2.appendChild(textnode1); cell2.appendChild(textnode2); row.appendChild(cell2); tabBody.appendChild(row); cell3.appendChild(textnode3); row.appendChild(cell3); tabBody.appendChild(row); cell4.appendChild(checknode3); cell4.appendChild(checknode4); row.appendChild(cell4); tabBody.appendChild(row); } --> </script> <SCRIPT LANGUAGE="JavaScript"> <!-- function disablefields(){ if (document.getElementById('guest[]').checked == 0){ document.getElementById('guestc[]').disabled='disabled'; document.getElementById('guestc[]').value=''; document.getElementById('guestn[]').disabled='disabled'; document.getElementById('guestn[]').value=''; document.getElementById('food[]').disabled='disabled'; document.getElementById('food[]').value=''; }else{ document.getElementById('guestc[]').disabled=''; document.getElementById('guestc[]').value='Call Sign'; document.getElementById('guestn[]').disabled=''; document.getElementById('guestn[]').value='Enter Name'; document.getElementById('food[]').disabled=''; document.getElementById('food[]').value='breakfast'; } } --> </SCRIPT> </head> <body> <form name="checkin" method="post"> <table> <tbody id="data"> <tr><td> <input type="checkbox" name="guest[]" id="guest" onclick="disablefields()"></td> <td> <input type="text" disabled name="guestc[]" id="guestc[]" size="7" maxlength="9" value="" onkeyup="this.value = this.value.toUpperCase();" /></td> <td><input type="TEXT" name="guestn[]" disabled id="guestn[]" size="20" maxlength="30" value=""></td> <td> <input type="checkbox" name="food[]" disabled id="food[]" value="breakfast"></td></tr> </tbody> </table> <table border="0" width="100%"> <tr> <td><input type="button" value="Add new check-in" onclick="addRow();" /></td> </tr> </table> </form> </body> </html> [CODE] I am trying to write a javascript page where the primary form of user input is an HTML form (shown below) Code: <form id=UI> State: <input type="text" name="state" > Postal abriviation: <input type="text" name="ab"> Capital: <input type="text" name="cap"> <input type="button" name="answer" value="Answer" onClick="check()"> <br> <input type="button" name="show_name" value="Show State" onClick="hint=1;select_state();"> <br> <input type="button" name="show_ab" value="Show Abriviation" onClick="hint=2;select_state();"> <br> <input type="button" name="show_cap" value="Show Capitol" onClick="hint=3;select_state();"> </form> the button named 'answer' does what i want, but when the user pushes enter, if he is in one of the form fields it automatically sends him to the url with all of the form date (www.url.com?state=maryland&ab=md&cap=annapolis) i modified my body tag to run the 'check()' function when enter is pushed, which it does but immideatly sends me to the following url Code: <body onload="first_run()" onkeydown="if (event.keyCode == 13){check()}">
is their any way to disable to the submit built into the form tag either through HTML or javascript? Hello all, I have 2 radio buttons update bsc value update mnr value when user selects update mnr value, two more radio buttons should appear. I have mnr value I do not have mnr value. On selecing I do not have mnr value im submitting the form and enabling the user to select values from dropdown. ( not shown in the code as it is a coldfusion code.). On submit I am not able to still keep the 'but2', and 'my_select3' elements disabled. Please advice. I have been working on this since quite sometime. <script language="JavaScript"> function makeChoice() { var obj1 = document.getElementById('box1') var obj2 = document.getElementById('box2') if (document.getElementById('but1').checked) { obj2.setAttribute('readOnly','readonly'); obj1.removeAttribute('readOnly'); document.getElementById('but1').disabled=true; document.getElementById('but2').disabled=true; } else if (document.getElementById('but2').checked) { obj1.setAttribute('readOnly','readonly'); obj2.removeAttribute('readOnly'); document.getElementById('but2').disabled=true; document.getElementById('but1').disabled=true; } } </script> <script type="text/javascript"> function showSelect() { if (document.getElementById('but2').checked) { document.getElementById('but2').disabled=true; } } </script> <script type="text/javascript"> function showSelect1() { if (document.getElementById('but2').checked) { document.myform.submit(); document.getElementById('but2').disabled=true document.getElementById('my_select3').disabled=true } } </script> <td><input type="radio" id="but1" name="vals" onclick="makeChoice()"></td> <td>Update BSC Value </td> <tr> <td><input type="radio" id="but2" name="vals" onclick="makeChoice();showSelect();" ></td> <td>Update MNR Value </td> <td> <input id="my_select1" class="show" type="radio" name="my_select1" onclick="this.myform['my_select1'].disabled=true"></td> <td> I have a Position Number </td> <td><input id="my_select3" class="show" type="radio" name="my_select3" onclick="showSelect1();"></td> <td> I do not have a Position Number </td> Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
I am no javascript expert, very much a beginner. I am trying to incorporate some into a web-based form. The problem is the button I created to add extra fields does not work, and I can't find exactly where the problem is. I'm in need of some help from a javascript guru. Help me enjoy my Friday afternoon by solving this! The javascript is mostly borrowed and slightly altered, the "additem" I wrote myself so that is probably where the problem lies! Here is the html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showAsset(id,str)
{
if (str=="")
{
document.getElementById("assetinfo"+id).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("assetinfo"+id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getasset.php?q="+str,true);
xmlhttp.send();
}
var noFields = "5";
function additem()
{
var fieldrow = document.createElement('tr');
var fieldcolumn1 = document.createElement('td');
var fieldinput = document.createElement('input');
fieldinput.name = "asset";
fieldinput.onChange = "showAsset("+noFields+",this.value)";
var fieldcolumn2 = document.createElement('td');
fieldcolumn2.id = "assetinfo"+noFields;
fieldcolumn1.appendChild(fieldinput);
var fieldcolumns = fieldcolumn1 + fieldcolumn2;
fieldrow.appendChild(fieldcolumns);
var addbefore = document.getElementById('fieldend');
document.body.insertBefore(fieldrow, addbefore);
noFields = noFields++;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td><input name="asset" onChange="showAsset(1,this.value)"></td>
<td id="assetinfo1"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(2,this.value)"></td>
<td id="assetinfo2"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(3,this.value)"></td>
<td id="assetinfo3"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(4,this.value)"></td>
<td id="assetinfo4"></td>
</tr>
<tr>
<td><input name="asset" onChange="showAsset(5,this.value)"></td>
<td id="assetinfo5"></td>
</tr>
<tr id="fieldend">
<td><input id="addfield" type="button" value="add item" onClick="addfield()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is the associated getasset.php: Code: <?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("assettracking", $con);
$sql="SELECT * FROM assets WHERE assetID = '".$q."'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
{
echo "<b>".$row['make'] ." ".$row['model'] ." - ".$row['serialnumber']."</b> | Status: ".$row['statusID']." | Comments: ".$row['comments'];
}
mysql_close($con);
?>
Hi, i have this code that generate 10 rows with form fields: Code: <form>
<?php for($i=1;$i<=10;$i++) {?>
<div id="rowz-rep">
<div class="row1"><?=$i?></div>
<div class="row2a"><input name="title[]" type="text" class="fieldSubmit"/></div>
<div class="row3a"><input name="url[]" type="text" class="fieldSubmit"/></div>
<div class="row4a"><select name="type[]" class="dropSubmit"><? foreach($allowed_types as $at) { echo '<option value="'.$at.'">'.$at.'</option>'; }?></select></div>
</div>
<? }?>
</form>
I need that onclick with JS add 10 more rows so i get something like Code: <?php for($i=1;$i<=20;$i++) {?>
Hi all, I'm new to here and JS but I have question for you! So I have this form with inputs that are considered arrays in my PHP code: Code: <input type="checkbox" name="1" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="2" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="3" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="4" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="5" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="6" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="7" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="8" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="9" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="10" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="11" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="12" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="13" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="14" /> <input name="ii[]" type="text"> <br /> <input type="checkbox" name="15" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="16" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="17" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="18" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="19" /> <input name="i[]" type="text"> <br /> <input type="checkbox" name="20" /> <input name="i[]" type="text"> <br /> I don't want to keep adding in new spots every time a user want to add a new field. I would like them to be able to press a button that will add another one of those fields and so on. I'm not sure how this can be achieved but that's why I am turning to you! Thanks! Hi guys, I created a form that contains about 10 form fields and would like to add the option to dynamically add more sets of those 10 fields if a user clicks a word or a button but I need help. I'm a beginner when it comes to JavaScript and would appreciate any help. This is what I need to generate dynamically. Can someone give me an idea of how to get started please? Code: <div id="dynamicInput"> <ul> <li>1</li> <li><input name='textfield1' type='text' size='10' /></li> <li><select name='commodity' width='100' style='width: 100px'> <option>Option 1</option> </select></li> <li><input name='textfield2' type='text' size='5' /></li> <li><input name='textfield3' type='text' size='10' /></li> <li><input name='textfield4' type='text' size='10' /></li> <li><input name='textfield5' type='text' size='10' /></li> <li><input name='textfield6' type='text' size='5' /></li> <li><input name='textfield7' type='text' size='5' /></li> <li><input name='textfield8' type='text' size='5' /></li> </ul> </div> Here's what I have so far in my validation part. However, I need help as to how to validate the following fields when the user clicks the submit button. -Radio Button *title (4 options) *member (3 options) *vegetarian (2 options) -Drop down lists *regstartdate (3 options) *regenddate (3 options) *confdinner (2 options) *paymethod (3 options) -UK Post Code (text box with maxlength=8) My current code shows 1 popup with all the error messages. Here's what I have so far: Redacted This is what I'm trying to do. CONDITIONS: If a person selects a Friday Class but not a Saturday Class the Total Cost Field will automatically enter $99. If a person selects a Saturday Class but not a Friday Class the Total Cost Field will automatically enter $99 as well. If a person selects both a Friday & Saturday Class the Total Cost field will automatically be $159. I found the following code and so far only have it changing when a Friday class is entered. I have no idea where to go from here. Please help. Code: <!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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<p><span class="style1">Friday Class:</span>
<select id="fridayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
<p> <span class="style1">Saturday Class:</span>
<select id="saturdayClass" >
<option> </option>
<option value="Class1"> Class 1 </option>
<option value="Class2"> Class 2</option>
<option value="Class3"> Class 3 </option>
</select>
</p>
</div>
<div><span class="style1">Total Cost:</span>
<input type="text" id="totalCost"/></div>
<script>
window.onload = function () {
var friday = document.getElementById('fridayClass'),
saturday = document.getElementById('saturdayClass');
friday.onchange = function () {
totalCost.value = '$99.00';
};
};
</script>
I have a drop down selection where it shows and hides form inputs depending on selection. When the page loads it shows the drop down selections with no form inputs. After user selects drop down it shows the form fields. It works great but I want it to show the same form fields after the user hits the submit button which submits the page to itself. It currenlty goes back to the default selection list and doesnt show any of the form fields. Basically it hides all the form fields after the user hits submit button. How do I make it keep the last shown form fields after the user hits the submit button? test3.html looks like this: Code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Show/Hide</title>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
}
</script>
</head>
<body>
<form name="tester" action="test3.html" method="get">
<table width="340" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td class="title">Type:</td>
<td class="field">
<select name="type" onchange="display(this,'text','image');">
<option>Please select:</option>
<option value="image">Image</option>
<option value="text">Texts</option>
<option value="invisible">Invisible</option>
</select>
</td>
</tr>
</thead>
<tfoot>
<tr>
<td class="align-center" colspan="2"><input type="submit" name="submit" value="Update" /> <input type="reset" value="Reset" /></td>
</tr>
</tfoot>
<tbody id="text" style="display: none;">
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody id="image" style="display: none;">
<tr>
<td class="title">Image:</td>
<td class="field"><input type="file" name="image" size="10" /></td>
</tr>
<tr>
<td class="title">X Coordinates:</td>
<td class="field"><input type="text" name="x_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Y Coordinates:</td>
<td class="field"><input type="text" name="y_coordinates" size="5" /></td>
</tr>
<tr>
<td class="title">Text Color:</td>
<td class="field"><input type="text" name="color" size="8" maxlength="7" /></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="title">Display:</td>
<td class="field">
<select name="display">
<option value="visitors">Visitors</option>
<option value="hits">Hits</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Can someone please help me with my JavaScript, my code below works for BillingAddress2 but it doesn't for ShippingAddress2 (when you click off the ShippingAddress2 form field it alerts undefined) these form fields are in the same form JS Code: $("input").blur(function () {
if($(this).val() == '') {
if($(this).attr("id") != 'BillingAddress2' && $(this).attr("id") != 'ShippingAddress2') {
alert($(this).attr("item"));
}
}
});
html parts of the form Code: Billing Address Line 2:<br /><INPUT type="text" id="BillingAddress2" name="BillingAddress2" title="text" class="notrequired" value="<%=Session("BillingAddress2")%>" maxlength="30" tabindex="4">
Shipping Address 2:<br /><INPUT type="text" id="ShippingAddress2" name="ShippingAddress2" title="" class="notrequired" value="<%=Session("ShippingAddress2")%>" maxlength="30" tabindex="12">
I have two slightly different forms on the same page, but I want the values in form1 to auto populate the same form fields in form2. 1 field is a text field, the rest are drop down menus. How would I accomplish this? Link to tutorial would be much appreciated. Thanks
I'm trying to make a site where when you click the submit button it puts an asterisk next to all of the incomplete fields while also displaying an alert box. I'm having no luck with it so far since I don't know how to get a script to print something to a specific part of a page. Here is what the whole thing looks like so far. I tried using page-jumping but that didn't work: Code: <html>
<head>
<title>Sortomatic 5000 </title>
<script type="text/javascript">
function Sort(form){
var fruits = [form.One.value, form.Two.value, form.Three.value];
if (form.One.value!=""&&form.Two.value!=""&&form.Three.value!=""){
document.writeln(fruits.sort());
}
if(form.One.value=""){
alert("Please enter at least one character into all fields.");
parent.location='#first';
document.writeln("*");
}
if(form.Two.value=""){
alert("Please enter at least one character into all fields.");
}
else{
alert("Please enter at least one character into all fields.");
}
}
</script>
</head>
<body>
<form name="Sortform" >
<input type="text" name="One"><A NAME="first"></A><br>
<input type="text" name="Two"><br><A NAME="second"></A>
<input type="text" name="Three"><br><A NAME="third"></A>
<input type="submit" onClick="Sort(this.form)">
</form>
</body>
</html>
|
|||||||