0

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>
Brian Tompsett - 汤莱恩
5,92772 gold badges64 silver badges135 bronze badges
asked May 20, 2017 at 13:42
5
  • 1
    You have a typo, fucntion instead of function if that's your issue then close this question please Commented May 20, 2017 at 13:44
  • Also, your inputs often are missing name attributes and have non-unique id. Commented May 20, 2017 at 13:51
  • I fixed the typo but It still will not valid my user information. Do you have any ideas? Commented May 20, 2017 at 13:52
  • @B.Mack Yes, please refer to my comment above. E.g. you can't access an element document.myform.age when there is no input named age. Commented May 20, 2017 at 13:54
  • @le_m Ok. I added name attributes to all the inputs I missed but it still don't not valid. Commented May 20, 2017 at 14:06

3 Answers 3

1

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>
answered May 20, 2017 at 13:47
Sign up to request clarification or add additional context in comments.

3 Comments

Is there a way to have an empty radio button selected but not visually? The reason is because the form defaults gender to male when nothing is selected?
Yes it is possible. You have a little wrong condition in your logic:
You need to loop via this array: ` var genderBox = document.myform.gender: for (var i=0; i<genderBox .length; i++) { if (genderBox [i].checked) { selected.push(genderBox[i].value); } } ` Hope this will help you. sorry for second comment
0

You misspelled function as fucntion. Hope that fixes it.

answered May 20, 2017 at 13:48

Comments

0

Change type="button" to type="submit".

answered May 20, 2017 at 14:00

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.