|
JavaScript - Capturing Radio-buttons Based Dropdown Selection Into A Variable
Codes for Dropdown menu based on radio buttons selection needed!?
I need urgent help with this: I need codes for a dropdown menu that is altered by radio buttons. I want to insert the value selected from the dropdown menu into a table. Similar Tutorialsform is .asp scenario: I have 3 radio buttons above number of boxes (dropdown). I want the dropdown selection box greyed out on selecting Electronic (radio button) Physical (radio button) Image (radio button) Electronic (radio button) Number of Boxes [dropdown box] Thanks for your help I am new to coding. Hi, i am building a website form which I would like the user to select a product of interest. Some products are three tiered and some are two tiered. 1. Example of three tier (3 dropdowns required only): Scooters (dropdown 1) Three Wheel Scooters (dropdown 2) Delux 503S Bird Scooter (dropdown 3) 2. Example of two tier (2 dropdowns required only): Standing Bikes (dropdown 1) Children 300 Series (dropdown 2) If the user wants to submit their interest for one of the products, I need to have at most 3 dropdown menus. So in Example 1, I would have 3 dropdowns in my form. Dropdown 1: Scooters Dropdown 2: Three Wheel Scooters Dropdown 3: Delux 503S Bird Scooter In Example 2, I would only need to use the first 2 dropdown menus. (Obviously the first dropdown would contain 'Scooters' and 'Standing Bikes' in the menu list) The below code is perfect except, I would like to alter the code so that the second and third dropdowns are hidden until a selection from the first drop down is made. Once for example, 'Standing Bikes' is selected from the first dropdown menu, the second dropdown menu appears and the third remains hidden due to the fact that it is not required. If I selected Scooters from the first dropdown menu, the second dropdown would appear listing all items associated with this and at this point the third dropdown menu is hidden. If i select 'Three Wheel Scooter' from the second dropdown the third dropdown menu now appears listing all Three wheel Scooters such as 'Delux 503S Bird Scooter'. I hope this makes sense. Let me know if you require clarrification. Here is the code: Code: <script language="JavaScript" type="text/javascript">
<!--
/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
data_1_1_1 = new Option("111", "*");
data_1_1_2 = new Option("112", "*");
data_1_1_3 = new Option("113", "*");
data_1_2_1 = new Option("121", "*");
data_1_2_2 = new Option("122", "*");
data_1_2_3 = new Option("123", "*");
data_1_2_4 = new Option("124", "*");
data_2_1_1 = new Option("211", "**");
data_2_1_2 = new Option("212", "**");
data_2_2_1 = new Option("221", "**");
data_2_2_2 = new Option("222", "**");
data_2_3_1 = new Option("231", "***");
data_2_3_2 = new Option("232", "***");
// fourth combo box
data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
</form>
<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>
Dear Javascript programmers, Do you have an example of a Javascript something like this: A dropdownlist with values "one" and "two". The radio button is not visible (as a start). - If you have selected "one" from the dropdown list, then a radio button will appear. - If you have selected "two" from the dropdown list, then a radio button will NOT appear. Thanks, Cornelis Gouda - The Netherlands Hi, On a registration form I have 4 fields that are all dropdown select fields. NAME, CLASS-1, CLASS-2, CODE 1) I would like to activate the CLASS-1, CLASS-2, CODE fields only if the NAME IS Selected from the dropdown. 2) Also would like to make the CLASS-1, CLASS-2 as required fields if the NAME is selected from the dropdown. How can I achieve this? Can I use some kind of a server event to activate / deactivate the fields on the form? Please advice Thanks Vinny I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. How can I hide/disable the submit button if the name Todd is selected? Code: <html> <head> </head> <body> <form name="people"> <select name="group"> <option value="Pick Your Name">Choose</option> <option value="Tom">Tom</option> <option value="Freddy">Freddy</option> <option value="Todd">Todd</option> <option value="Fred">Fred</option> <option value="William">William</option> <option value="Johnson">Johnson</option> </select> <INPUT TYPE=submit VALUE="submit"> </form> </body> </html> Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Ok I am very very new to java to the point where I only know how to use pre-made javascripts in my php code so be gentle. First, here is part of a form I have: Code: <select name = "pulmonologist" >
<option selected="" value="">---Select---
<option value="none">None</option>
<?php
while ($row2 = mysql_fetch_assoc ($results2)) {
?><option value = "<?php echo $row2['staff_name'];?>"><?php echo $row2['staff_name'];?></option>
<?php }
?>
</select>
Ok now I want to echo the value that the user selects on the SAME page (i.e. before the submit button is pressed) (so I can't do it with php, I need javascript) like this: Code: <input type="submit" value = "Contact <?php echo $pulmonologist;?>" /> Can you tell me how to do this? Thanks! Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I am trying to use the radio button to display the information for the users. For example, when I click radio button "1", the form should display 1 text box each for first name, last name and so on. When the user clicks on radio button 2, there should be text boxes displayed for user 1 and user 2 to enter their info(first name, last name and so on). I looked at the forum, but couldn't find something similiar.Please advise. Something like ================================ Number of Users 1 2 3 # if radio button 2 is selected then User 1 First Name Last Name User 2 First Name Last Name ================================ The code is as below: <html> <head> <script type="text/javascript"> function showUser() { for(i=0;i<document.form.users.length;i++) { if (document.form.users[i].checked) val=parseInt(document.form.users[i].value); for(j=0;j<=val;j++) { document.form.write("<table cellSpacing=1 cellPadding=0 width=600 border=0>"); document.form.write("<tr> <td width='20%' align='right'><font color="#660000"><b>First Name: </b></font></td>"); document.form.write("<td><input type='text' name='fname1' size='25' maxlength='25'></td></tr>"); document.form.write("<tr><td width='20%' align='right'><font color="#660000"><b>Last Name: </b></font></td>"); document.form.write("<td><input type='text' name='lname1' size='25'maxlength='25'></td></tr>"); document.form.write("</table>"); } } } </script> </head> <form> Check the number of users to display additional input fields.<br><br> <input type="radio" name="users" value="1" onclick = "showUser()"/> 1<br/> <input type="radio" name="users" value="2" onclick = "showUser()"/>2 <br/> <input type="radio" name="users" value="3" onclick = "showUser()"/>3 <br/> </form> </html> ======================================================== Thanks in advance. I've got a function that returns the value of a radio button group. However the application allows to "hide" some groups on others responses and that effectively make the radio groups not exist. This causes issues with calculations using the total value of the groups combined. I need a way to return a value of '0.00' IF the function does not find the group/returns an error.This is what I currently got to but doesnt work. The function does not work at all. Code: function funcRadioCalc(RadioName)
{
var chkList1= document.getElementById (RadioName);
var arrayOfCheckBoxes= chkList1.getElementsByTagName("input");
var bob;
try {
for( var i=0;i<arrayOfCheckBoxes.length;i++){
if (arrayOfCheckBoxes[i].checked) {
bob= arrayOfCheckBoxes[i].value;
if (bob!=undefined||bob!=""){
throw "yep";
}else{
throw "nope";
}
}
}
catch (er){
if(er=="nope")
{
return "0.00";
}
if(er=="yep")
{
return bob;
}
}
}
hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks I want to insert text to a textarea based on the selected text. It should insert tags like the buttons for posting on this form work. Ie: If 'bar' is selected, and I click 'b', then I get: Code: Foo bar frog becomes: Code: Foo <b>bar</b> frog I found some code that works for firefox, but I need it to work in explorer as well. Do you have any ideas or examples how to do this? Here's the code I'm currently using. ( Works right in ff3. In IE7 it appends the tags at the end of the text. I want it to insert based on my selection. ) Usage: Code: <a onclick="insertTags('<b>', '</b>', document.forms.formpost.text);return false;" href="javascript:void(0);">[ Bold ]</a>
insert function: Code: <script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function insertTags(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;
if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;
textarea.value = begin + text1 + selection + text2 + end;
if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}
</script>
Hey everyone, I have a simple html form that asks a user to select a state from a drop down list. Later, in the same form, there's a question that needs to display an image of the state they previously selected from the drop down menu. How can I accomplish this using javaScript?
Hi Guys, I'm a new member, so hello all! I'm ok at html/xhtml, but i know nothing about javascript, so hoping someone here can help! Basically, I have a contact form on my website that offers 2 different types of contact: RSVP and Other. these two types are available in a selection box. What I want to happen is when the "RSVP" option is selected, the following options are displayed: "Yes/No" radio buttons "additional info" textarea And when the "Other" option is selected, the following option is displayed: "Message" text area How can i make this happen?! i've tried searching the internet but I can't get anything i find to work. I can't even get the elements to hide! At the moment, my form looks like this: - Code: <form method="POST" action="contact.php"> <table class="contact"> <tr> <td>Name:</td> <td><input type="text" name="name" size="20"></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="email" size="20"></td> </tr> <tr> <td>Contact Type:</td> <td><select size="1" name="type"> <option value="rsvp" >RSVP</option> <option value="other">Other</option></td> </tr> <tr> <td colspan=2> </td> </tr> <div id="rsvp" style="display:none;"> <tr> <td colspan=2><input type="radio" name="response" value="y"> Yes Please!</td> </tr> <tr> <td colspan=2><input type="radio" name="response" value="n"> Sorry, but No. </td> </tr> <tr> <td colspan=2>Additional Comments (Please include any special dietary requirements): </td> </tr> <tr> <td colspan=2><textarea rows="5" name="rsvpmsg" cols="30"></textarea></td> </tr> </div> <div id="other" style="display:none;"> <tr> <td colspan=2>Message:</td> </tr> <tr> <td colspan=2><textarea rows="9" name="othermsg" cols="30"></textarea></td> </tr> </div> <tr> <td> </td> <td><input type="submit" value="Submit" name="submit"> <input type="reset" value="Reset" name="reset"></td> </tr> </table> </form> Please note, the style="display:none;" parts aren't even working I appreciate any help you can give! thanks! I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues. In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option. Anybody got a clue what the problem is? Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time. Here's the code that's ajaxed in: Code: <label>First Time Buyer Status <!--These values can't be 1/0 because 0 stands for not set--> <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer <input type="radio" name="FTB" id="FTBNo" value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer </label> The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference. The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this? In the mean time, is there a way I can check if any JS functions when I click on the radio button? Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it. Is it possible to pull multiple variables from a single dropdown menu selection? example: I have this: Code: function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value='.926'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value='1.050'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value='.958'>CYCOLAC T (ABS)<\/option>";
data += "<\/select>";
document.write(data);
}
I'd like to have multiple option values: Code: function material_choices_menu() /* Provides Specific Gravity for various materials */
{
var data = "Material <select name='material'>";
data += "<option value1='.926', option value2='.005-.008'>CYCOLAC MG47 (ABS)<\/option>";
data += "<option value1='1.050', option value2='.005-.008'>CYCOLAC MG47MD (ABS)<\/option>";
data += "<option value1='.958', option value2='.005-.008'>CYCOLAC T (ABS)<\/option>";
data += "<\/select>";
document.write(data);
}
I plan to use the first value in some math formulas to determine weights and the rest of the values will just be shown as data for the user and/or possibly a link to the datasheet for the material selected. Is this possible or am I reaching here? Hello, I would like to know how can I send the selection from a dropdown from a webpage to another. In the first page where I have the dropdown list, I have this: Code: <td valign="top" align="left" nowrap width="90%">
<input name="time" style="width:100%" />
</td>
<td valign="top" align="left" nowrap width="50">
<select name="time2">
<option value="60">Minutes</option>
<option value="3600">Hour</option>
<option value="86400">Days</option>
</select>
</td>
In the second page, where I want this selection to be dispalyed, I created this code: Code: <td width="188" valign="top" align="left" nowrap> <SCRIPT LANGUAGE="JavaScript">document.write(window.opener.document.form.elements["time"].value + " " + window.opener.document.form.elements["time2"].value);</SCRIPT> </td> The issue I have with this is that the value dispalyed for the "time2" element is the actual attribute value (for instance 60) and not the actual value (for instance "Minutes"). If anyone have a clue what I'm doing wrong, I appreciate your help. Regards, Need a javascript function... If a checkbox is checked, then corresponding dropdown selection is must... Please help me with this... Thanks Reply With Quote Hi Everyone, I'm encountering errors with a form I have created. I feel confident that the issue is with my JS validation form because when I allow the form to submit without validating any of the fields, my php processor correctly uploads all the content into my database (but, I will need the form validation to prevent the user from skipping fields). The issue (I believe) is with IE. In IE, both drop-downs seem to populate correctly but when I submit the form, I get a prompt to make a selection for the first drop-down menu. The form does submit properly in FireFox and Safari but with some testing I noticed that I was getting a prompt to make a selection in the first drop-down in instances where a selection was already made but I just had not yet populated the second country/state drop-down. Still, in Firefox and Safari, the form does pass validation upon submit.. So, I am hoping it's just IE specific issue. I'm thinking the issue is with IE not recognizing my selection. The form had a drop-down menu where the user selects a letter, then that selection triggers (in JS using a function to process the selection) another drop-down to populate with all the countries or states that begin with the letter from the first selection. Here is the code from my form: Code: <p><span class="title">Sign Up</span></p>
<br />
<form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
<p>All required fields are marked with ( <span class = "requiredStar">*</span> )</p>
<br />
<p><label for="first_name">First Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="first_name" id="first_name" style="height: 20px;" size="30" tabindex="1" maxlength="30" /></div>
<br />
<p><label for="last_name">Last Name: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="last_name" id="last_name" style="height: 20px;" size="30" tabindex="2" maxlength="30" /></div>
<br />
<p><label for="countryLtr">Select the first letter of your country: <span class = "requiredStar">*</span></label></p>
<select id="countryLtr" name="countryLtr" id="countryLtr" size="1" tabindex="3" onchange="processSelection()">
<option value=""></option>
<option value="USA">USA</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
<br />
<br />
<p><label for="countryState">Select your country/ state (if USA): <span class = "requiredStar">*</span></label></p>
<select id="countryState" name="countryState" id="countryState" size="1" tabindex="4">
</select>
<br />
<br />
<p><label for="username">Create a username: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="username" id="username" style="height: 20px;" size="30" tabindex="5" maxlength="30" /></div>
<br />
<p><label for="email">Email: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="text" name="email" id="email" style="height: 20px;" size="30" tabindex="6" maxlength="30" /></div>
<br />
<p><label for="password">Create a password: <span class = "requiredStar">*</span></label></p>
<div class = "contactRight"><input type="password" name="password" id="password" style="height: 20px;" size="30" tabindex="7" maxlength="30" /></div>
<br />
<br />
<input type="hidden" name="source" value="12345">
<input type="image" name="submit" value="Submit" class="submitButton" src="images/submit-button.png" />
<input type="image" name="reset" value="Reset" class="resetButton" src="images/reset-button.png" />
<br />
</form>
and here is the code for processing the selection of the first drop-down and populating the second drop-down (I reduced the number of options for the countries to save on characters for this post): Code: function processSelection() {
choice1 = document.getElementById("countryLtr");
choice2 = document.getElementById("countryState");
choice2.length = 0;
if (choice1.value == "USA") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Alaska");
choice2[choice2.length] = new Option("American Samoa");
choice2[choice2.length] = new Option("Arizona");
choice2[choice2.length] = new Option("Arkansas");
choice2[choice2.length] = new Option("California");
choice2[choice2.length] = new Option("Colorado");
choice2[choice2.length] = new Option("Connecticut");
choice2[choice2.length] = new Option("Delaware");
choice2[choice2.length] = new Option("District of Columbia");
choice2[choice2.length] = new Option("Florida");
choice2[choice2.length] = new Option("Georgia");
choice2[choice2.length] = new Option("Guam");
choice2[choice2.length] = new Option("Hawaii");
choice2[choice2.length] = new Option("Idaho");
choice2[choice2.length] = new Option("Illinois");
choice2[choice2.length] = new Option("Indiana");
choice2[choice2.length] = new Option("Iowa");
choice2[choice2.length] = new Option("Kansas");
choice2[choice2.length] = new Option("Kentucky");
choice2[choice2.length] = new Option("Louisiana");
choice2[choice2.length] = new Option("Maine");
choice2[choice2.length] = new Option("Maryland");
choice2[choice2.length] = new Option("Massachusetts");
choice2[choice2.length] = new Option("Michigan");
choice2[choice2.length] = new Option("Minnesota");
choice2[choice2.length] = new Option("Mississippi");
choice2[choice2.length] = new Option("Missouri");
choice2[choice2.length] = new Option("Montana");
choice2[choice2.length] = new Option("Nebraska");
choice2[choice2.length] = new Option("Nevada");
choice2[choice2.length] = new Option("New Hampshire");
choice2[choice2.length] = new Option("New Jersey");
choice2[choice2.length] = new Option("New Mexico");
choice2[choice2.length] = new Option("New York");
choice2[choice2.length] = new Option("North Carolina");
choice2[choice2.length] = new Option("North Dakota");
choice2[choice2.length] = new Option("Northern Marianas Islands");
choice2[choice2.length] = new Option("Ohio");
choice2[choice2.length] = new Option("Oklahoma");
choice2[choice2.length] = new Option("Oregon");
choice2[choice2.length] = new Option("Pennsylvania");
choice2[choice2.length] = new Option("Puerto Rico");
choice2[choice2.length] = new Option("Rhode Island");
choice2[choice2.length] = new Option("South Carolina");
choice2[choice2.length] = new Option("South Dakota");
choice2[choice2.length] = new Option("Tennessee");
choice2[choice2.length] = new Option("Texas");
choice2[choice2.length] = new Option("Utah");
choice2[choice2.length] = new Option("Vermont");
choice2[choice2.length] = new Option("Virginia");
choice2[choice2.length] = new Option("Virgin Islands");
choice2[choice2.length] = new Option("Washington");
choice2[choice2.length] = new Option("West Virginia");
choice2[choice2.length] = new Option("Wisconsin");
choice2[choice2.length] = new Option("Wyoming");
} else if (choice1.value == "A") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Azerbaijan");
} else if (choice1.value == "B") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("The Bahamas");
} else if (choice1.value == "C") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Czech Republic");
} else if (choice1.value == "D") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Denmark");
} else if (choice1.value == "E") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Ecuador");
} else if (choice1.value == "G") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Gabon");
} else if (choice1.value == "H") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Haiti");
} else if (choice1.value == "I") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Iceland");
} else if (choice1.value == "J") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Jamaica");
} else if (choice1.value == "K") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Kazakhstan");
} else if (choice1.value == "L") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Laos");
} else if (choice1.value == "M") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Macau");
} else if (choice1.value == "N") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Namibia");
} else if (choice1.value == "O") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Oman");
} else if (choice1.value == "P") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Pakistan");
} else if (choice1.value == "Q") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Qatar");
} else if (choice1.value == "R") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Reunion");
} else if (choice1.value == "S") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Saint Helena");
} else if (choice1.value == "T") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Taiwan");
} else if (choice1.value == "U") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Uganda");
} else if (choice1.value == "V") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Vanuatu");
} else if (choice1.value == "W") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Wake Island");
} else if (choice1.value == "Y") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Yemen");
} else if (choice1.value == "Z") {
choice2[choice2.length] = new Option("");
choice2[choice2.length] = new Option("Zambia");
}
}
Here is the code for validating the form upon submission: Code:
function validateRequestForm() {
var theForm = document.getElementById("requestForm"); //form reference
var valid = true; //flag, must be true to proceed
if (theForm.name.value == "") {
alert ("Please enter a name");
valid = false;
theForm.username.focus();
} else if (theForm.countryLtr.value == "") {
alert ("Please select the first letter of your country");
valid = false;
theForm.countryLtr.focus();
} else if (theForm.countryState.value == "") {
alert ("Please select your country. If USA, please select your state");
valid = false;
theForm.countryState.focus();
} else if (theForm.email.value == "") {
alert ("Please enter your email address");
valid = false;
theForm.email.focus();
} else if (theForm.title.value == "") {
alert ("Please enter a title for your request");
valid = false;
theForm.title.focus();
} else if (theForm.request.value == "") {
alert ("Please enter your request");
valid = false;
theForm.request.focus();
} if (valid == true) {
alert ("Thank you for your prayer request. Your request has been submitted for review. Please check your account to see the status of your prayer request. You may also check recent requests to view your request after it has been posted.");
return true; //submit form
} else {
return false; //form invalid
}
}
I'm totally stumped as to what could be going on in IE that is not allowing the form to pass JS validation.. Any help would be greatly appreciated!! Thanks! |
|||||||