Validate dynamically populated select menu

shoapin · 02-10-2013, 06:39 PM

After the user selects a country, it populates and displays a select menu with the states from the populate.php page. After the new populated select menu is displayed i want to check to make sure the user has made a selection before submitting the form. Currently i am only changing the background colour but i cant get the message to display, nor can i stop it from submitting before the information is correct. Any help would b appreciated. Thank you.

Here is my code:
Validate.php page

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
		//function to populate menu
	jQuery(document).ready(function(){				
		// when any option from country list is selected
		jQuery("select[name='country']").change(function(){	

			// get the selected option value of country
			var optionValue = jQuery("select[name='country']").val();		
			jQuery("#cityAjax")
				.html(ajaxLoader)
				.load('populate.php', {country: optionValue, status: 1}, function(response){					
					if(response) {
						jQuery("#cityAjax").css('display', '');
					} else {
						jQuery("#cityAjax").css('display', 'none');
					}
			});			
		});
	});

		        // Validate Select boxes
        function validateSelect(x){
            if(document.getElementById(x).selectedIndex !== 0){
                document.getElementById(x).style.background ='#ccffcc';
                document.getElementById(x + 'Error').style.display = "none";
                return true;
            }else{
                 document.getElementById(x).style.background ='#e35152';
				 document.getElementById(x + 'Error').style.display = "block";
                return false;   
            }
        }

	
				function validateForm(){
 			// Set error catcher
			var error = 0;
			 // Validate city dropdown box
            if(!validateSelect('city')){
                document.getElementById('cityError').style.display = "block";
                error++;
            }
			// Don't submit form if there are errors
			if(error > 0){
    		return false;
			}
		}
</script>	

</head>
<body>
        <div id="cityAjax"  style="display:none">
          <div class="slAdd1a">Parish:</div>
          <div class="slAdd1b">
            <label for="city"></label>
           <select name="city" id="city" onblur="validateSelect(name)">
            <option value="">--Select a State--</option>
            </select>
            <span class="validateError" id="animalError" style="display: none;">You must select a state</span>
          </div></div>
        <div class="slAdd1">
          <div class="slAdd1a">Country:</div>
          <div class="slAdd1b"><span id="sprycountry">
            <label for="country"></label>
            <select name="country" id="country">
              <option value="" selected="selected">Please Select</option>
              <option value="Russia">Russia</option>
              <option value="England">England</option>
            </select>
            <span class="selectInvalidMsg">Please select a valid item.</span><span class="selectRequiredMsg">Please select an item.</span></span></div>
            </div>
</body>
</html>

And the second page
populate.php page

Code:

<?php
$country = $_POST['country'];

if(!$country) {
	return false;
}

$cities = array(
			"Russia" => array('Russian State'),
			"England" => array('English State'),
                   );
$currentCities = $cities[$country];
?>

<div id="cityAjax">
          <div class="slAdd1a">Parish:</div>
  <div class="slAdd1b">
          <label for="city"></label>
          <select name="city" id="city" onblur="validateSelect(name)">
            <option value="">--Select a State--</option>
            <?php
			foreach($currentCities as $city) {
			?>
            <option value="<?php echo $city; ?>"><?php echo $city; ?></option>
            <?php 
			}
				?>
          </select>
          <span class="validateError" id="cityError" style="display: none;">You must select State</span></div></div>

rnd me · 02-11-2013, 03:38 AM

in newer browsers and mobile, you can simply add the word " required " to your <select> tag to prevent empty submitting.

Philip M · 02-11-2013, 08:50 AM

Code:

function validateSelect(x){
if (document.getElementById(x).selectedIndex == 0) {
alert ("You must make a selection"):
return false;
}

Quizmaster: In the Bible, Noah's three sons are called Japheth, Shem and ... what? Ham, Lamb or Spam?
Contestant: Lamb.
Quizmaster: The correct answer is Ham.
Contestant: Who'd call their son Ham?