确认消息框问题和重置按钮问题答案

【问题标题】：Confirm Message Box Issue and Reset Button Issue确认消息框问题和重置按钮问题
【发布时间】：2023-04-06 19:20:01
【问题描述】：

我的问题是双重的。首先，我似乎无法弄清楚如何让我的确认消息框正常并取消以正常工作。任务要求我运行消息，然后验证我的信息，如果验证通过，则提醒确定或取消。我以相反的方式完成了它（验证....消息....警报），但我不知道该怎么做。

其次，无论我点击确定还是取消，我的重置按钮都会清除我的信息？？？有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
    body {
        background-color: white;
    }

    h1 {
        text-align: center;
        font-family: Impact;
        color: green;
    }

    p {
        font-size: 36px;
        color: green;
    }
</style>
<!--Script Element-->
<script type="text/javascript">
    /* <![CDATA[ */
    function submitRegistration() {
        var fName = document.registration.firstName.value;
        var lName = document.registration.lastName.value;
        var cwid = document.registration.cwid.value;
        var semester = document.registration.semester.value;
        var course = document.registration.courses.value;
        var section = document.registration.section.value;
        var major = document.registration.needForMajor.value;
        var semesterDisplay;
        if (semester == "fall")
            semesterDisplay = "Fall";
        if (semester == "spring")
            semesterDisplay = "Spring";
        if (semester == "summer")
            semesterDisplay = "Summer";
        var checkDisplay;
        if (document.registration.needForMajor.checked == true) {
            checkDisplay = "Course Needed For Major";
        }
        else {
            checkDisplay = "";
        }
        window.confirm("Student Name: " + fName + " " + lName + "   CWID: " + cwid + "   Semester: " + semesterDisplay + "   Course: " + course + "   Section: " + section + "   " + checkDisplay);
        if (fName == "") {
            window.alert("You must enter your first name!");
            return false;
        }
        if (isNaN(fName) == false) {
            window.alert("Your First Name must be non-numeric values!");
            return false;
        }
        if (lName == "") {
            window.alert("You must enter your last name!");
            return false;
        }
        if (isNaN(lName) == false) {
            window.alert("Your Last Name must be non-numeric values!");
            return false;
        }
        if (cwid == "") {
            window.alert("You must enter your cwid!");
            return false;
        }
        if (isNaN(cwid) == true) {
            window.alert("Your CWID must be numeric values!");
            return false;
        }
        var validateSemester = false;
        for (var i = 0; i < 3; ++i) {
            if (document.registration.semester[i].checked == true) {
                validateSemester = true;
                break;
            }
        }
        if (validateSemester != true) {
            window.alert("You must select a Semester!");
            return false;
        }
        if (course == "") {
            window.alert("You must select a Course!");
            return false;
        }
        if (section == "") {
            window.alert("You must select a Section!");
            return false;
        }   
        if (true) {
            window.alert("You have been registered for your course!");
        }
        else {
            window.alert("Your registration has been canceled.");
        }
    }
    function resetRegistration() {
        var resetForm = window.confirm("Are you sure you want to reset the form?");
        if (resetForm == true)
            return true;
        return false;
    }
    /* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
    <h1>Greendale Community College</h1>
        <center><img src="greendale.jpg" alt="greendale" width="512" height="256" /></center>
    <h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get"
      onsubmit="submitRegistration();"
      onreset="resetRegistration()">
    <h3>Student Information Form</h3> 
    <!--Student Information-->
    First Name:<input type="text" name="firstName"><br>
    Last Name:<input type="text" name="lastName"><br>
    CWID:<input type="text" name="cwid"><br>
    <h3>Semester</h3>
    <h4>(choose a semester)</h4>
    <!--Radio Buttons to Choose Semester-->
    <input type="radio" name="semester" value="fall" /> Fall 2018 <br />
    <input type="radio" name="semester" value="spring" /> Spring 2018 <br />
    <input type="radio" name="semester" value="summer" /> Summer 2018 <br />
    <h3>Courses</h3>
    <h4>(choose one course)</h4>
    <table>
        <!--Drop Down Box for Courses-->
        <tr><td style="background:white;border:0">Courses:</td>
        <tr>
            <td>
                <select name="courses" size="1">
                    <option value=""></option>
                    <option value="CIS 110">Intro to CIS</option>
                    <option value="CIS 120">Application Prog I</option>
                    <option value="CIS 299">System Analysis I</option>
                    <option value="CIS 330">Web Programming I</option>
                    <option value="CIS 304">Cobol</option>
                </select>
            </td>
        </tr>
    </table>
    <h3>Sections</h3>
    <h4>(choose one section)</h4>
    <table>
        <tr><td style="background:white;border:0">Section Numbers:</td>
        <tr>
            <td>
                <select name="section" multiple="multiple" size="5">
                    <option value="001">CIS 110 001</option>
                    <option value="gw1">CIS110 GW1</option>
                    <option value="001">CIS 120 001</option>
                    <option value="gw1">CIS 120 GW1</option>
                    <option value="gw1">CIS 302 GW1</option>
                    <option value="001">CIS 304 001</option>
                    <option value="gw1">CIS 303 GW1</option>
                    <option value="001">CIS 321 001</option>
                    <option value="gw1">CIS 321 GW1</option>
                    <option value="gw1">CIS 322 GW1</option>
                </select>
                </td>
            </tr>
    </table>
    <input type="checkbox" name="needForMajor" />
    Check if the course is required for your major!<br />
    <!--Submit and Reset Buttons Created-->
    <input type="submit" name="submit" onsubmit="submitRegistration();" value="Submit"><br />
    <input type="reset" name="reset" onreset="resetRegistration();" value="Reset">
    </form>
    </body>
</html>

【问题讨论】：

标签： javascript reset confirm

【解决方案1】：

我明白了：我忘了用 return：

<form action="FormProcessor.html" name="registration" method="get"
      onsubmit="return submitRegistration();"
      onreset="return resetRegistration()">

代替：

<form action="FormProcessor.html" name="registration" method="get"
      onsubmit="submitRegistration();"
      onreset="resetRegistration()">

【讨论】：

【解决方案2】：

尝试以下解决方案。它应该可以工作。

<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
    body {
        background-color: white;
    }

    h1 {
        text-align: center;
        font-family: Impact;
        color: green;
    }

    p {
        font-size: 36px;
        color: green;
    }
</style>
<!--Script Element-->
<script type="text/javascript">
    /* <![CDATA[ */
    function submitRegistration() {
        var fName = document.registration.firstName.value;
        var lName = document.registration.lastName.value;
        var cwid = document.registration.cwid.value;
        var semester = document.registration.semester.value;
        var course = document.registration.courses.value;
        var section = document.registration.section.value;
        var major = document.registration.needForMajor.value;
        var semesterDisplay;
        if (semester == "fall")
            semesterDisplay = "Fall";
        if (semester == "spring")
            semesterDisplay = "Spring";
        if (semester == "summer")
            semesterDisplay = "Summer";
        var checkDisplay;
        if (document.registration.needForMajor.checked == true) {
            checkDisplay = "Course Needed For Major";
        }
        else {
            checkDisplay = "";
        }

        if (fName == "") {
            window.alert("You must enter your first name!");
            return false;
        }
        if (isNaN(fName) == false) {
            window.alert("Your First Name must be non-numeric values!");
            return false;
        }
        if (lName == "") {
            window.alert("You must enter your last name!");
            return false;
        }
        if (isNaN(lName) == false) {
            window.alert("Your Last Name must be non-numeric values!");
            return false;
        }
        if (cwid == "") {
            window.alert("You must enter your cwid!");
            return false;
        }
        if (isNaN(cwid) == true) {
            window.alert("Your CWID must be numeric values!");
            return false;
        }
        var validateSemester = false;
        for (var i = 0; i < 3; ++i) {
            if (document.registration.semester[i].checked == true) {
                validateSemester = true;
                break;
            }
        }
        if (validateSemester != true) {
            window.alert("You must select a Semester!");
            return false;
        }
        if (course == "") {
            window.alert("You must select a Course!");
            return false;
        }
        if (section == "") {
            window.alert("You must select a Section!");
            return false;
        }  
        var confirmation = window.confirm("Student Name: " + fName + " " + lName + "   CWID: " + cwid + "   Semester: " + semesterDisplay + "   Course: " + course + "   Section: " + section + "   " + checkDisplay);

        if (confirmation) {
            window.alert("You have been registered for your course!");
            return true;
        }
        else {
            window.alert("Your registration has been canceled.");
            return false;
        }
    }
    function resetRegistration() {
        var resetForm = confirm("Are you sure you want to reset the form?");
        if (resetForm == true)
            return true;
        return false;
    }
    /* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
    <h1>Greendale Community College</h1>
        <center><img src="greendale.jpg" alt="greendale" width="512" height="256" /></center>
    <h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get" onsubmit="return submitRegistration();" onreset="return resetRegistration();">
    <h3>Student Information Form</h3> 
    <!--Student Information-->
    First Name:<input type="text" name="firstName"><br>
    Last Name:<input type="text" name="lastName"><br>
    CWID:<input type="text" name="cwid"><br>
    <h3>Semester</h3>
    <h4>(choose a semester)</h4>
    <!--Radio Buttons to Choose Semester-->
    <input type="radio" name="semester" value="fall" /> Fall 2018 <br />
    <input type="radio" name="semester" value="spring" /> Spring 2018 <br />
    <input type="radio" name="semester" value="summer" /> Summer 2018 <br />
    <h3>Courses</h3>
    <h4>(choose one course)</h4>
    <table>
        <!--Drop Down Box for Courses-->
        <tr><td style="background:white;border:0">Courses:</td>
        <tr>
            <td>
                <select name="courses" size="1">
                    <option value=""></option>
                    <option value="CIS 110">Intro to CIS</option>
                    <option value="CIS 120">Application Prog I</option>
                    <option value="CIS 299">System Analysis I</option>
                    <option value="CIS 330">Web Programming I</option>
                    <option value="CIS 304">Cobol</option>
                </select>
            </td>
        </tr>
    </table>
    <h3>Sections</h3>
    <h4>(choose one section)</h4>
    <table>
        <tr><td style="background:white;border:0">Section Numbers:</td>
        <tr>
            <td>
                <select name="section" multiple="multiple" size="5">
                    <option value="001">CIS 110 001</option>
                    <option value="gw1">CIS110 GW1</option>
                    <option value="001">CIS 120 001</option>
                    <option value="gw1">CIS 120 GW1</option>
                    <option value="gw1">CIS 302 GW1</option>
                    <option value="001">CIS 304 001</option>
                    <option value="gw1">CIS 303 GW1</option>
                    <option value="001">CIS 321 001</option>
                    <option value="gw1">CIS 321 GW1</option>
                    <option value="gw1">CIS 322 GW1</option>
                </select>
                </td>
            </tr>
    </table>
    <input type="checkbox" name="needForMajor" />
    Check if the course is required for your major!<br />
    <!--Submit and Reset Buttons Created-->
    <input type="submit" name="submit" value="Submit"><br />
    <input type="reset" name="reset" value="Reset">
    </form>
    </body>
</html>

【讨论】：

是的，这对确认有用。我不认为我可以把它放在之后，但现在它是有道理的。重置按钮有什么想法吗？
重置也在我提供的解决方案中起作用。它不适合你吗？