Javascript onclick提交按钮问题
[英]Javascript onclick submit button issues
问题描述
I'm working on validating user information via a form. 
我正在通过表单验证用户信息。 I made a simple user information form and I cannot get the submit button to call the javascript fuction in the head. 我做了一个简单的用户信息表格，但无法获取提交按钮来调用头部的javascript功能。 I do not know if I structured something incorrectly. 我不知道我的结构是否不正确。 I looked at the script in the head but I just cannot find the issue. 我看了一下头上的脚本，但找不到问题。 Can someone help me find the issue with my submit button? 有人可以通过提交按钮帮助我找到问题吗？ Below, I have pasted my entire webpage for clarity. 下面，为清楚起见，我粘贴了整个网页。
<!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
You have i typo error defining function getResults 你有我错字错误定义函数getResults
just fix the function definition and i guess everything will be ok 只需修复函数定义，我想一切都会好的
Regards 问候
Yes you have several others errors: 是的，您还有其他几个错误：
- set form fields name 设置表单字段名称
- access them via respective names. 通过各自的名称访问它们。
You can check my fix here 你可以在这里查看我的修复
<!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
You misspelled function as fucntion . 您将function fucntion拼为fucntion 。 Hope that fixes it. 希望能解决它。
解决方案3
0 2017-05-20 14:00:41
将type =“ button”更改为type =“ submit”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
JavaScript提交按钮onclick重定向无法正常工作 - JavaScript submit button onclick redirect not working
Javascript“onclick”事件不会在提交按钮上加载 - Javascript “onclick” event does not load on submit button
两个功能的Javascript按钮。 提交和点击 - Javascript button for two functions. Submit & OnClick
javascript的onclick函数的提交按钮不起作用 - Onclick function of javascript for submit button not working
表单提交按钮onClick JavaScript功能 - Form submit button onClick JavaScript function
onclick提交按钮未返回javascript函数yii - onclick submit button not returning javascript function yii
如果启用了Javascript，则使用onclick事件替换提交按钮 - Replace submit button with onclick event if Javascript enabled
Onclick表单提交为按钮提交 - Onclick form submit as button submit
提交按钮上的onclick事件 - onclick event on submit button
按钮类型=“通过onClick提交” - button type='submit' with onClick
相关标签