2017-07-20 64 views
0

我的问题是双重的。首先,我似乎无法弄清楚如何让我的确认消息框确定并取消以正常工作。该任务要求我运行该消息,然后验证我的信息,如果验证通过,则提醒您确定或取消。我反过来(验证....消息....警报),但我不知道如何做到这一点。确认消息框发布和重置按钮问题

二,我的重置按钮清除我的信息,无论我打好还是取消???有任何想法吗?

<!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> 

回答

0

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

<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> 
+0

是的,这工作了确认。我不认为我可以把它放在后面,但它现在是有道理的。任何想法的重置按钮? –

+0

重置也适用于我提供的解决方案。它不适合你吗? –

0

我知道了:我忘了用的回报:中

<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()">