B.Mack
Reputation: 37
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. 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>
Upvotes: 0
Views: 132
Answers (3)
tailhour
Reputation: 81
You have i typo error defining function 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>
Upvotes: 1
Related Questions
- Submit and onclick not working together
- Javascript document.form.submit not working
- onClick event doesn't work inside form tag
- Trying to submit a parent form using onclick event, not working
- onclick event on submit button
- click() a button named 'submit' in Javascript
- JavaScript and DOM button event handling
- How to properly use javascript with SUBMIT?
- Issues with submit button
- submit form with onclick event not working