Question

我试图打开另一个显示用户在提交表单中输入内容的div，但是提交按钮只是清除表单，我无法弄清楚原因。我们必须使用Javascript来显示结果。这是代码：

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        h1 {
            text-align: center;
            color: blue;
            font-family: 'Courier';
            margin: 30px;
        }

        h2 {
            margin-top: 40px;
            margin-left: 500px;
            margin-bottom: 20px;
        }

        #divresults {
            display: none;
        }
    </style>
</head>
<body>

    <div id="customerform">
        <form onsubmit="return showResults();">
            <p>First Name: <input type="text" id="fname" value="" required /></p>
            <p>Last Name: <input type="text" id="lname" value="" required /></p>
            <p>Street Address: <input type="text" id="address" value="" required /></p>
            <p>City: <input type="text" id="city" value="" required /></p>
            <p>State: 
                <select id="states" required>
                    <option id="statedefault" value="">Please select your state</option>
                    <option value="Alabama">Alabama</option>
                    <option value="Alaska">Alaska</option>
                    <option value="Arizona">Arizona</option>
                    <option value="Arkansas">Arkansas</option>
                    <option value="California">California</option>
                    <option value="Colorado">Colorado</option>
                    <option value="Connecticut">Connecticut</option>
                    <option value="Delaware">Delaware</option>
                    <option value="Florida">Florida</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Hawaii">Hawaii</option>
                    <option value="Idaho">Idaho</option>
                    <option value="Illinois">Illinois</option>
                    <option value="Indiana">Indiana</option>
                    <option value="Iowa">Iowa</option>
                    <option value="Kansas">Kansas</option>
                    <option value="Kentucky">Kentucky</option>
                    <option value="Louisiana">Louisiana</option>
                    <option value="Maine">Maine</option>
                    <option value="Maryland">Maryland</option>
                    <option value="Massachusetts">Massachusetts</option>
                    <option value="Michigan">Michigan</option>
                    <option value="Minnesota">Minnesota</option>
                    <option value="Mississippi">Mississippi</option>
                    <option value="Missouri">Missouri</option>
                    <option value="Montana">Montana</option>
                    <option value="Nebraska">Nebraska</option>
                    <option value="Nevada">Nevada</option>
                    <option value="New Hampshire">New Hampshire</option>
                    <option value="New Jersey">New Jersey</option>
                    <option value="New Mexico">New Mexico</option>
                    <option value="New York">New York</option>
                    <option value="North Carolina">North Carolina</option>
                    <option value="North Dakota">North Dakota</option>
                    <option value="Ohio">Ohio</option>
                    <option value="Oklahoma">Oklahoma</option>
                    <option value="Oregon">Oregon</option>
                    <option value="Pennsylvania">Pennsylvania</option>
                    <option value="Rhode Island">Rhode Island</option>
                    <option value="South Carolina">South Carolina</option>
                    <option value="South Dakota">South Dakota</option>
                    <option value="Tennessee">Tennessee</option>
                    <option value="Texas">Texas</option>
                    <option value="Utah">Utah</option>
                    <option value="Vermont">Vermont</option>
                    <option value="Virginia">Virginia</option>
                    <option value="Washington">Washington</option>
                    <option value="West Virginia">West Virginia</option>
                    <option value="Wisconsin">Wisconsin</option>
                    <option value="Wyoming">Wyoming</option>
                </select>
            </p>
            <p>Zip Code: <input type="text" id="zip" required /></p>
            <p>Gender:
                <input type="radio" name="sex" value="male" checked />Male
                <input type="radio" name="sex" value="female" />Female
            </p>
            <input type="submit" id="submitbutton" />
            <input type="reset" id="clear" value="Clear" />
        </form>
    </div>
    <br/>
    <div id="divresults">
        <h2>You entered: </h2>
        <p>First Name: <span id="first" class="results"></span></p>
        <p>Last Name: <span id="last" class="results"></span></p>
        <p>Street Address: <span id="street" class="results"></span></p>
        <p>City: <span id="cityresult" class="results"></span></p>
        <p>State: <span id="stateresult" class="results"></span></p>
        <p>Zip: <span id="zipcode" class="results"></span></p>
        <p>Gender: <span id="gen" class="results"></span></p>
        <input type="button" id="formreset" value="Go Back to Form" onclick="resetForm();" />
    </div>
    <script>
        function showResults() {
            //store form values
            var fst = document.getElementById("fname").value;
            var lst = document.getElementById("lname").value;
            var st = document.getElementById("address").value;
            var cty = document.getElementById("city").value;
            var ste = document.getElementById("states").value;
            var zp = document.getElementById("zip").value;
            var gndr = "male";
            var genders = document.getElementsByName("sex");
            for (var i = 0; i < 2; i++) {
                if (genders[i].checked) {
                    gndr = radios[i].value;
                    break;
                }
            }
            clearForm();
            //switch divs
            document.getElementById("customerform").style.display = "none";
            document.getElementById("divresults").style.display = "block";
            //display results
            document.getElementById("first").innerHTML = fst;
            document.getElementById("last").innerHTML = lst;
            document.getElementById("street").innerHTML = st;
            document.getElementById("cityresult").innerHTML = cty;
            document.getElementById("stateresult").innerHTML = ste;
            document.getElementById("zipcode").innerHTML = zp;
            document.getElementById("gen").innerHTML = gndr;
            return false;
        }

        function clearForm() {
            document.getElementById("fname").value = "";
            document.getElementById("lname").value = "";
            document.getElementById("address").value = "";
            document.getElementById("city").value = "";
            document.getElementById("states").value = "";
            document.getElementById("zip").value = "";
        }

        function resetForm() {
            document.getElementById("first").innerHTML = "";
            document.getElementById("last").innerHTML = "";
            document.getElementById("street").innerHTML = "";
            document.getElementById("cityresult").innerHTML = "";
            document.getElementById("stateresult").innerHTML = "";
            document.getElementById("zipcode").innerHTML = "";
            document.getElementById("gen").innerHTML = "";
            document.getElementById("customerform").style.display = "block";
            document.getElementById("divresults").style.display = "none";
        }
    </script>
</body>
</html>

Answer 1

您在使用Uncaught ReferenceError: radios is not defined的for循环中遇到错误radios[i].value，genders[i].value

for (var i = 0; i < 2; i++) {
    if (genders[i].checked) {
        gndr = genders[i].value;
        break;
    }
}

演示：Fiddle

“提交”按钮清除表单而不是打开div

1 个答案: