Javascript onclick提交按钮问题

时间:2017-05-20 13:42:25

标签: javascript html dom javascript-events event-handling

我正致力于通过表单验证用户信息。我做了一个简单的用户信息表单,我无法通过提交按钮来调用头部的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 个答案:

答案 0 :(得分:1)

你有错误定义函数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>

答案 1 :(得分:0)

您拼错function fucntion。 希望能解决它。

答案 2 :(得分:0)

将type =“button”更改为type =“submit”。