HTML/Javascript/PHP Country and State List

Question

I have a script that is getting the country the user selects and then puts the corresponding states in the state box.

Here is my Javascript code in the head:

<script type="text/javascript" src="jquery-1.9.1.min.js">
</script>

<script type="text/javascript">
$(document).ready(function () {
$("#theselect").change(function() {
var option = $(this).val();
        $.get("select.php", {select:option},function(data){
            $("#theresult").html(data).hide().fadeIn(1000);
        });
    });
});
</script>

Here is the HTML code in the body:

<select name="theselect" id="theselect">
<option value="">Select</option>
<option value="submit_ind">Submit Individual Need</option>
<option value="submit_org">Submit Organization Need</option>
<option value="missionary">Submit Missionary Need</option>

Here is the select.php script that is giving what information is to be displayed when each option is selected:

echo "<script type= 'text/javascript' src = 'http://www.1511project.com/countries.js'></script>
";


***The other options are usually here but due to character restraints I had to delete to rest of it.  So I do have an original If statement and 2 other elseif statement***    

elseif($_GET['select'] == 'missionary') {

echo "<script>print_country('country');</script>";

?>
<script>

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }

var r=document.forms["myForm"]["titleofneed"].value;
if (r==null || r=="")
  {
  alert("Title of need must be filled out");
  return false;
  }

var s=document.forms["myForm"]["country"].value;
if (s==null || s=="")
  {
  alert("Country must be filled out");
  return false;
  }


var u=document.forms["myForm"]["phone"].value;

var b=document.forms["myForm"]["email"].value;
if ((b==null || b=="") && (u==null || u==""))
  {
  alert("Email or Phone must be provided for contact information.");
  return false;
  }

var c=document.forms["myForm"]["city"].value;
if (c==null || c=="")
  {
  alert("City must be filled out");
  return false;
  }

var d=document.forms["myForm"]["state"].value;
if (d==null || d=="")
  {
  alert("State must be filled out");
  return false;
  }

var h=document.forms["myForm"]["recurring"].value;
if (h==null || h=="")
  {
  alert("Recurring need must be filled out");
  return false;
  }

var j=document.forms["myForm"]["typeofneed"].value;
if (j==null || j=="")
  {
  alert("Type of need must be filled out");
  return false;
  }

}
</script>

<p>Please enter the information below for the CONTACT PERSON of the need you are submitting.<br /><br /></p>
<form action="processneedmiss.php" name="myForm" method="post" onsubmit="return validateForm();">
<p>First Name: <input type="text" name="firstname" /></p>
<p>Phone #: <input type="text" name="phone" /> <img src='http://www.aotees.com/images/questionMarkIcon_SMALL.jpg' alt='Must provide phone number OR email.  Providing both is recommended.' title='Must provide phone number OR email.  Providing both is recommended.' height='15' width='15'></p>
<p>Email: <input type="text" name="email" /> <img src='http://www.aotees.com/images/questionMarkIcon_SMALL.jpg' alt='Must provide phone number OR email.  Providing both is recommended.' title='Must provide phone number OR email.  Providing both is recommended.' height='15' width='15'></p>




<p>Country: <select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></p>

<p>District/State: <select name ="state" id = "state"></select></p>





<p>City: <input type="text" name="city" /></p>
<p>Title of Need: <input type="text" name="titleofneed" /> <img src='http://www.aotees.com/images/questionMarkIcon_SMALL.jpg' alt='Type a short title to organize your needs.' title='Type a short title to organize your needs.' height='15' width='15'></p>
<p>Type of Need: <select name="typeofneed"> <option></option><option>Supplies</option><option>Lawn Care</option> <option>Heavy Lifting</option><option>Event Volunteering</option><option>Home Repair</option> <option>Clean Up</option> <option>Other</option></select></p>
<p>Recurring Need:
<select name='recurring' size='1'>
<option value=''></option>
<option>No</option>
<option>Yes</option>
</select> <img src='http://www.aotees.com/images/questionMarkIcon_SMALL.jpg' alt='If need happens on a regular basis, select Yes' title='If need happens on a regular basis, select Yes.' height='15' width='15'>
</p>
<p>
How many people are needed: <input type="number" name="howmanypeople" /> <img src='http://www.aotees.com/images/questionMarkIcon_SMALL.jpg' alt='If you want the need to be taken down after a certain number of people sign up for the need, enter that number here. If you only want 1 person leave this blank.' title='If you want the need to be taken down after a certain number of people sign up for the need, enter that number here. If you only want 1 person leave this blank.' height='15' width='15'> 
</p>
<p>Expiration Date: (If no expiration date leave blank.)
<br>
Month: 
        <select name='month' size='1'>
    <option value='0'></option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
    <option value='9'>9</option>
    <option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>
  Day:
<select name='day' size='1'>
    <option value='0'></option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    <option value='6'>6</option>
    <option value='7'>7</option>
    <option value='8'>8</option>
    <option value='9'>9</option>
    <option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>
  Year:
<select name='year' size='1'>
    <option value='0'></option>
    <option value='2012'>2012</option>
    <option value='2013'>2013</option>
    <option value='2014'>2014</option>
    <option value='2015'>2015</option>
    <option value='2016'>2016</option>
    <option value='2017'>2017</option>
    <option value='2018'>2018</option>
    <option value='2019'>2019</option>
    <option value='2020'>2020</option>
    <option value='2021'>2021</option>
    <option value='2022'>2022</option>
    <option value='2023'>2023</option>
    <option value='2024'>2024</option>
    <option value='2025'>2025</option>
    <option value='2026'>2026</option>
    <option value='2027'>2027</option>
    <option value='2028'>2028</option>
</select>
</p>
<p>Description of Need: <br>(Do not include sensitive information you don't want others seeing on the website.)<br /><textarea name="description" onKeyDown="limitText(this.form.description,this.form.countdown,850);" 
onKeyUp="limitText(this.form.description,this.form.countdown,850);" style="margin: 2px; width: 494px; height: 164px;"></textarea><br><font size="1">(Maximum characters: 850)<br>
You have <input readonly type="text" name="countdown" size="4" value="850"> characters left.</font></p>
<p><input type="submit" value="Submit" /></p>
</form>
<?php
}
?>

The issue I'm having is that when people choose the "missionary" option the first time, it won't display the missionary form. But if I choose another form first then choose the missionary option, it will show and work fine. Or if I choose another form first, then the missionary option it will work. But it doesn't work if I choose "missionary" first.

I've tracked down the source of the problem to this piece of code in the "missionary" form:

<script>print_country('country');</script>

If that code is anywhere in the form, the form won't pull up the first time.

Can anyone help?

Answer 1

You seem to only include the countries.js library onto your page when you return a non "missionary" case. Make sure you include that file inside you elseif:

elseif($_GET['select'] == 'missionary') {

    echo "<script type= 'text/javascript' src = 'http://www.1511project.com/countries.js'></script>";
    echo "<script>print_country('country');</script>";

}

EDIT: Why do you even include that js file in your AJAX return and not have it ALWAYS in your parent page. That way it is ready to be used whenever necessary. It doesn't provide much overhead on the original pageload, but it is causing issues as part of an AJAX return.