Javascript onclick提交按钮问题
[英]Javascript onclick submit button issues
问题描述
我正在通过表单验证用户信息。 我做了一个简单的用户信息表格，但无法获取提交按钮来调用头部的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>
3 个解决方案
解决方案1
1 已采纳 2017-05-20 13:47:29
你有我错字错误定义函数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>
解决方案2
0 2017-05-20 13:48:40
您将function fucntion拼为fucntion 。 希望能解决它。
解决方案3
0 2017-05-20 14:00:41
将type =“ button”更改为type =“ submit”。
如果启用了Javascript，则使用onclick事件替换提交按钮
[英]Replace submit button with onclick event if Javascript enabled
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.