Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Question IE not recognizing dropdown selection in JS form

    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!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    At a first glance:
    Code:
    function validateRequestForm(){
    }
    ...
    <form id = "signupForm" action="signup_process.php" method = "post" onsubmit="return validateSignupForm();">
    You are barking at the wrong tree You have named your validation code with a name, but you call it in the form with another. Nothing will be validated, no matter the browser.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post
    Wait, I posted the wrong script. The one I posted was for a different form. Sorry! I have multiple scripts in my script.js file and I accidentally showed you guys the wrong one.. I still have the issue.

    The script is validating, so I know it's running. IE just just won't identify the drop-downs as being populated and allow the form to submit. Firefox and Safari are OK, they validate and submit.

    Here is the script for validateSignupForm():

    Code:
    function validateSignupForm() {
    	
    	var theForm = document.getElementById("signupForm"); //form reference
    	
    	var valid = true; //flag, must be true to proceed
    	
    	if (theForm.first_name.value == "") {
    	
    			
    			alert ("Please enter your first name");
    			
    			valid = false;
    			
    			theForm.first_name.focus();
    	
    	
    	} else if (theForm.last_name.value == "") {
    	
    			
    			alert ("Please enter your last name");
    			
    			valid = false;
    			
    			theForm.last_name.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 or state");
    			
    			valid = false;
    			
    			theForm.countryState.focus();
    	
    	
    	} else if (theForm.username.value == "") {
    	
    			
    			alert ("Please create a username");
    			
    			valid = false;
    			
    			theForm.username.focus();
    	
    	
    	} else if (theForm.password.value == "") {
    	
    			
    			alert ("Please create a password");
    			
    			valid = false;
    			
    			theForm.password.focus();
    	
    	
    	} else if (theForm.repassword.value == "") {
    	
    			
    			alert ("Please re-enter your password");
    			
    			valid = false;
    			
    			theForm.repassword.focus();
    	
    	
    	} else if (theForm.email.value == "") {
    	
    			
    			alert ("Please enter your email address");
    			
    			valid = false;
    			
    			theForm.email.focus();
    	
    	
    	}  if (valid == true) {
    
    				alert("Thank You! Please check your email to confirm you signup.");
    				return true; //form invalid
    				
    	} else {
    				return false; //form invalid
    	}
    	
    }
    Please help if you have any idea what could be going wrong! Thank you!!
    Last edited by KaliK; 03-18-2011 at 08:52 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •