JavaScript表单提交帮助

JavaScript Form Submit Assistance

本文关键字：帮助 表单提交 JavaScript      更新时间：2023-09-26

我正试图让我的代码在提交之前提醒我是否有任何内容没有填写、检查或选择。如果没有选择月份或日期，我也很难让它提醒我。如有任何见解或帮助，我们将不胜感激！

<html>
<head>
<title>Field Trip Consent Form</title>
<script type="text/javascript">
function validates() { 
var radioChecked = false;
for(var i=0; i< document.form1.permission.length; i++) {
if(document.form1.permission[i].checked) {
      radioChecked = true;          
    }
}
if(radioChecked == false) {      
    alert("Please chose permission Status");
    return false;          
} 
if(document.form1.txtParent.value == "") {
    alert("Please type in the textbox");    
    return false;            
}
if(document.form1.destination.value == "") {
    alert("Please type in the textbox");   
    return false;            
}    
return true;
}
function validates1(){
var moMonth = document.getElementById("getMonth").value;
var moDay = document.getElementById("day").value;
if(moMonth == "") { 
    alert("Please select a Month"); 
    return false; 
}   
if(moDay == "") { 
    alert("Please select a Day"); 
    return false;
}   
return true;        
}
</script> 
</head>
<body>
<h1>Field Trip Consent Form</h1>
<form name="form1" onsubmit="return validates(); validates1()" method="post" 
action="http://legacy.jefferson.kctcs.edu/users/mark.prather/formhandler.asp"> 
<form>
<h2>Description of Trip</h2>
<p>Destination &nbsp;
<input type="text" name="destination" SIZE="50" /></p>
<p>Date of Trip &nbsp;
<select name="month" id='getMonth'>
<option selected value="Month">Month
<option value="Jan">Jan
<option value="Feb">Feb
<option value="Mar">Mar
<option value="Apr">Apr
<option value="May">May
<option value="Jun">Jun
<option value="Jul">Jul
<option value="Aug">Aug
<option value="Sep">Sep
<option value="Oct">Oct
<option value="Nov">Nov
<option value="Dec">Dec
</select>
<select name="day">
<option selected value="Day">Day
<option value="01">01
<option value="02">02
<option value="03">03
<option value="04">04
<option value="05">05
<option value="06">06
<option value="07">07
<option value="08">08
<option value="09">09
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<select name="year">
<option selected value="2012">2012
<option value="2013">2013
<option value="2014">2014
<option value="2015">2015
</select>

<h2>Parental Information</h2>
<p>Mother's Name &nbsp;
<input type="text" name="txtParent" size="20" /></p>
<p>Mother's Work Phone &nbsp;
<input type="text" name="txtParent" size="20" /></p>
<p>Father's Name &nbsp;
<input type="text" name="txtParent" size="20" /></p>
<p>Father's Work Phone &nbsp;
<input type="text" name="txtParent" size="20" /></p>
<p><input type="radio" name="permission" value="yes" /> Permission is Granted &nbsp;
<input type="radio" name="permission" value="no" /> Permission is NOT Granted &nbsp;</p>
<p><input type="submit" value="Submit This Data" /> &nbsp; &nbsp; 
<input type="reset" /></p> 
</form>
</body>
</html>

<html>
<head>
<title>Field Trip Consent Form</title>
<script type="text/javascript">
function validates() { 
var radioChecked = false;
for(var i=0; i< document.form1.permission.length; i++) {
if(document.form1.permission[i].checked) {
      radioChecked = true;          
    }
}
if(radioChecked == false) {      
    alert("Please chose permission Status");
    return false;          
} 
if(document.form1.txtParent.value == "") {
    alert("Please type in the textbox");    
    return false;            
}
if(document.form1.destination.value == "") {
    alert("Please type in the destination box");   
    return false;            
}    
return true;
}
function validates1(){
var m = document.getElementById("getMonth");
var moMonth = m.options[m.selectedIndex].value;
var d = document.getElementById("day");
var moDay = d.options[d.selectedIndex].value;
if(moMonth == "Month") { 
    alert("Please select a Month"); 
    return false; 
}   
if(moDay == "Day") { 
    alert("Please select a Day"); 
    return false;
}   
return true;        
}
</script> 
</head>
<body>
<h1>Field Trip Consent Form</h1>
<form name="form1" onsubmit="validates(),validates1();" method="post" action="/test.php"> 
<h2>Description of Trip</h2>
<p>Destination &nbsp;
<input type="text" name="destination" SIZE="50" /></p>
<p>Date of Trip &nbsp;
<select name="month" id="getMonth">
<option selected value="Month">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select name="day" id="day">
<option selected value="Day">Day
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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>
<select name="year">
<option selected value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>

<h2>Parental Information</h2>
<p>Mother's Name &nbsp;
<input type="text" name="txtParent" size="20" /></p>
<p><input type="radio" name="permission" value="yes" /> Permission is Granted &nbsp;
<input type="radio" name="permission" value="no" /> Permission is NOT Granted &nbsp;</p>
<p><input type="submit" value="Submit This Data" /> &nbsp; &nbsp; 
<input type="reset" /></p> 
</form>
</body>
</html>

始终使用

var m = document.getElementById("getMonth");
var moMonth = m.options[m.selectedIndex].value;
var d = document.getElementById("day");
var moDay = d.options[d.selectedIndex].value;

像这样的选择选项

使用此。。所有最好的

更改

onsubmit="return validates(); validates1()"

至：

onsubmit="return (validates() || validates1())"

您的代码在调用validates()后立即返回，因此它从不调用validates1()。此代码首先调用validates()。如果返回false，则返回结果（因此不提交表单）。否则，它将调用validates1()并返回结果。

相关文章：