HTML / Javascript / PHP国家和州列表

时间：2013-04-04 19:12:51

标签： php javascript html state country

我有一个脚本正在获取用户选择的国家/地区，然后将相应的状态放入状态框中。

这是我头脑中的Javascript代码：

<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>

以下是正文中的HTML代码：

<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>

这是select.php脚本，它提供了选择每个选项时要显示的信息：

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
}
?>

我遇到的问题是，当人们第一次选择“传教士”选项时，它不会显示传教士的形式。但是，如果我先选择另一种形式，然后选择传教选项，它将显示并正常工作。或者，如果我先选择另一种形式，那么传教士选择就可以了。但如果我先选择“传教士”，它就行不通了。

我已经以“传教士”的形式找到了这段代码的问题根源：

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

如果该代码位于表单中的任何位置，则表单第一次不会启动。

有人可以帮忙吗？

1 个答案:

答案 0 :(得分：0)

当您返回非“传教”案例时，您似乎只在您的页面上包含countries.js库。确保将该文件包含在elseif内：

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

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

}

编辑：为什么你甚至在你的AJAX回归中包含那个js文件而不是总是在你的父页面中。这样就可以在必要时使用它。它不会在原始页面加载上提供太多开销，但它会导致问题成为AJAX返回的一部分。

相关问题
最新问题