我正在通过表单验证用户信息。我制作了一个简单的用户信息表单,但我无法获得提交按钮来调用头部的 javascript 功能。我不知道我是否结构不正确。我看了看脑袋里的剧本,但就是找不到问题所在。有人可以帮助我找到提交按钮的问题吗?下面,为了清楚起见,我粘贴了整个网页。
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello, World!");
fucntion getResults()
{
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var city = document.getElementById("city").value;
var gender = document.getElementById("gender").value;
var age = document.myform.age.option[document.myform.age.selectedIndex].value;
var state = document.myform.state.option[document.myform.state.selectedIndex].value;
var checkboxes = document.getElementsByName('box');
var selected = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
selected.push(checkboxes[i].value);
}
}
// var zip = document.getElementById("zip").vaule;
if(name == "")
{
alert("You must supply a full name!");
}
if(address == "")
{
alert("You must supply an address!");
}
if(city == "")
{
alert("You must supply a city!");
}
if(gender == "")
{
alert("You must supply a gender!");
}
if(age == "")
{
alert("You must supply an age!")
}
if(state == "")
{
alert("You must supply a state!")
}
if(selected.length < 1)
{
alert("You must supply a checked box for how you found my page!")
}
/* if(zip == "" || zip.length > 5 || /^[0-9]+$.test(zip))
{
alert("You must supply zip code!");
} */
document.getElementById("results").innerHTML = "Your name is " + name + ". You at this addresss " + address + "in this city " + city + "in this state " + state + ". Your gender is " + gender + ". You are " + age + "years old, and you found my webpage through this/these means " + selected.toString(); + "."
}
</script>
</head>
<body>
<form name="myform" id="myform">
<table border="3">
<tr>
<th>User Information Form</th>
</tr>
<tr>
<td>Full Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="text" id="address">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state" id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<input type="text" id="city">
</td>
</tr>
<!-- <tr>
<td>Zip Code:</td>
<td>
<input type="text" id="zip">
</td>
</tr> -->
<tr>
<td>Gender:</td>
<td>
Male: <input type="radio" name="gender" id="gender" value="male">
<br>
Female: <input type="radio" name="gender" id="gender" value="female">
<br>
Intersex: <input type="radio" name="gender" id="gender" value="intersex">
<br>
Other: <input type="radio" name="gender" id="gender" value="other">
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<select>
<script>
for(i = 0; i < 101; i++)
{
document.writeln("<option value='" + i + "'>" + i + " </option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>How did you find my page?<br>(Check as many that apply)</td>
<td>
Friend:<input type="checkbox" id="box" value="friend">
<br>
Co-Worker:<input type="checkbox" id="box" value="coworker">
<br>
Family:<input type="checkbox" id="box" value="family">
<br>
Internet:<input type="checkbox" id="box" value="internet">
<br>
Maganize:<input type="checkbox" id="box" value="magazine">
<br>
Ad:<input type="checkbox" id="box" value="ad">
<br>
Other:<input type="checkbox" id="box" value="other">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" onclick="getResults()">
</td>
<td>
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
<p id="results"></p>
</body>
</html>
你有 i 拼写错误定义函数 getResults
只需修复函数定义,我想一切都会好起来
的问候
是的,您还有其他几个错误:
- 设置表单域名称
- 通过各自的名称访问它们。
你可以在这里检查我的修复
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello, World!");
function getResults()
{
var name = document.getElementById("name").value;
var address = document.getElementById("address").value;
var city = document.getElementById("city").value;
var gender = document.getElementById("gender").value;
var age = document.myform.age.value;
var state = document.myform.state.value;
var checkboxes = document.myform.referbox;
var selected = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
selected.push(checkboxes[i].value);
}
}
// var zip = document.getElementById("zip").vaule;
if(name == "")
{
alert("You must supply a full name!");
}
if(address == "")
{
alert("You must supply an address!");
}
if(city == "")
{
alert("You must supply a city!");
}
if(gender == "")
{
alert("You must supply a gender!");
}
if(age == "")
{
alert("You must supply an age!")
}
if(state == "")
{
alert("You must supply a state!")
}
if(selected.length < 1)
{
alert("You must supply a checked box for how you found my page!")
}
/* if(zip == "" || zip.length > 5 || /^[0-9]+$.test(zip))
{
alert("You must supply zip code!");
} */
document.getElementById("results").innerHTML = "Your name is " + name + ". You at this addresss " + address + "in this city " + city + "in this state " + state + ". Your gender is " + gender + ". You are " + age + "years old, and you found my webpage through this/these means " + selected.toString(); + "."
}
</script>
</head>
<body>
<form name="myform" id="myform">
<table border="3">
<tr>
<th>User Information Form</th>
</tr>
<tr>
<td>Full Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="text" id="address">
</td>
</tr>
<tr>
<td>State:</td>
<td>
<select name="state" id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<input type="text" id="city">
</td>
</tr>
<!-- <tr>
<td>Zip Code:</td>
<td>
<input type="text" id="zip">
</td>
</tr> -->
<tr>
<td>Gender:</td>
<td>
Male: <input type="radio" name="gender" id="gender" value="male">
<br>
Female: <input type="radio" name="gender" id="gender" value="female">
<br>
Intersex: <input type="radio" name="gender" id="gender" value="intersex">
<br>
Other: <input type="radio" name="gender" id="gender" value="other">
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<select name="age">
<script>
for(i = 0; i < 101; i++)
{
document.writeln("<option value='" + i + "'>" + i + " </option>");
}
</script>
</select>
</td>
</tr>
<tr>
<td>How did you find my page?<br>(Check as many that apply)</td>
<td>
Friend:<input type="checkbox" name="referbox" id="box" value="friend">
<br>
Co-Worker:<input type="checkbox" name="referbox" id="box" value="coworker">
<br>
Family:<input type="checkbox" name="referbox" id="box" value="family">
<br>
Internet:<input type="checkbox" name="referbox" id="box" value="internet">
<br>
Maganize:<input type="checkbox" name="referbox" id="box" value="magazine">
<br>
Ad:<input type="checkbox" name="referbox" id="box" value="ad">
<br>
Other:<input type="checkbox" name="referbox" id="box" value="other">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit" onclick="getResults()">
</td>
<td>
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
<p id="results"></p>
</body>
</html>
你把function
拼错了fucntion
。希望能解决它。
将 type="button" 更改为 type="submit"。