Why isn't my form submit button not going to a

2019-09-08 11:35发布

站内问答 / JavaScript
624 1 5

I am trying to figure out why the form's "submit this form" button is not taking me to another HTML page I specified in the <form ... action="submit form.html" method="get"> attribute and not only that but when I put wrong first names, email addresses, and order numbers, and date of orders, it doesn't return JavaScript messages I specified in my if-else codes using JavaScript.

Here is the JavaScript code I use on the form.

var $ = function (id)
{
  return document.getElementById(id); 
}

var submitForm = function()
{
   var FirstName= $("firstName").value;
   var OrderNumber= $("orderNumber").value; 
   var DateOfOrder= $("date_of_order").value;
   var emailAddress= $("email_address").value; 
   var isValid=true;
    
   if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie")
   {
      $("firstname_error").firstChild.nodeValue=
       "This person does not exist.";
       isValid=false;
    } else{ $("firstname_error").firstChild.nodeValue="";}
    
  if(OrderNumber !== 3134, 4234, 9234, 3566)
  {
     $("orderNumber_error").firstChild.nodeValue="Invalid Order Number.";
     isValid=false;
   } else{ $("orderNumber_error").firstChild.nodeValue="";}

  if(DateOfOrder !=='12-07-23', '15-04-24', '16-02-01', '14-01-12')
  {
    $("date_of_order_error").firstChild.nodeValue="Date doesn't exist in
    system";
    isValid=false;
  } else{ $("date_of_order_error").firstChild.nodeValue="";}
  
  if(emailAddress !="cherryjackson@gmail.com", "michealroberts@yahoo.com",
   "sandrabell@hotmail.com", "cookiedanny@outlook.com")
  {
    $("email_address_error").firstChild.nodeValue="The email doesn't exist";
     isValid=false;
  } else{ $("email_address_error").firstChild.nodeValue="";}
   if(isValid)
     {
	   //submit the form if all entries are valid
	    $("cookie_form").submit();
     }
}
window.onload = function()
  {
    $("form_submission").onclick = submitForm;	
     $("email_address").focus(); 
  }
body{
       background-color:#FBFBE8;


}
/* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1
  and also centers the first heading */  
                     
h1{
            font-family:Arial, Helvetica, sans-serif; 
	    text-align:center;        
}


/* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file
   if one is not available. Also clears some white space 
   from the left margin of the paragraph and finally tells it to give that paragraph
   a size of 20 pixels. */

p{
            font-family:Arial, Helvetica, sans-serif; 
            padding: 20px;
            font-size:20px;  
}



label{
	float: left; 
	width: 11em; 
	text-align: right;
        font-family:Arial, Helvetica, sans-serif; 
        color:#800000;

}
  input{
  	  margin-left: 1em; 
  	  margin-bottom:.5em; 
  }
  span{
  	  color: red; 
  }

.field_set_1{
              border-color: purple;
              border-style: solid;


}

#form_submission{
                   background-color:black; color:white;

}

legend{ 
         font-family:Arial, Helvetica, sans-serif; 
          color:blue;
          
          

} 

/* All of the classes are just for positioning and floating the four 
same images around the form input information   */

.Wrap1{
             float:right;
             margin:40px;
             width:200px; 
             height:200px;
}
.Wrap2{
             float:left;
             margin:40px;
             width:200px; 
             height:200px;
}

.clearfix {
  clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Cookie Order Form </title>
<link rel="stylesheet" href="First_Design.css">
<script src="cookieform.js"></script>
</head>
<body>
<h1>Cookie Order Form</h1>
<p>This form is a cookie order form for customers that purchased cookies from
Daron's Cookies Company and the following below must be filled out in order for each
customer to receive a final message that tells them when their order will be ready.</p>


<IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
<IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">



<!--The customer will be sent to the HTML page named "submit form.html" after they
  click the "Submit this Form" button. The code below does this. -->
 <div>
 <form id="cookie_form" name="cookie_form" action="submit form.html" method="get">

<fieldset class="field_set_1">
         <!-- Below sets the title of the form-->
    <legend>Customer Order Form Information:</legend> 


 <!-- Creates the first left label to specify what should be placed in the text box
    the the right of the label. The rest below does the same.-->
 
  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" name="firstName">
  <span id="firstname_error">*</span><br>

  <label for="orderNumber">Order Number:</label>
  <input type="text" id="orderNumber" name="orderNumber">
  <span id="orderNumber_error">*</span><br>
  
  <label for="date_of_order">Date of Order:</label>
  <input type="text"  id="date_of_order" name="date_of_order">
  <span id="date_of_order_error">*</span><br>

  <label for="email_address">Email Address:</label>
  <input type="text" id="email_address" name="email_address">
  <span id="email_address_error">*</span><br>

  <label>&nbsp;</label>
  
  <input type="button" id="form_submission" value="Submit this Form">
  </fieldset>

  </form>

</div>
<div class="clearfix">
</div>
<IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
<IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">


</body>



</html>

1条回答
放我归山
2楼-- · 2019-09-08 12:34

There were a great many things wrong with your code, but the biggest was your validation tests, that each followed the same structure of:

if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie")

You can't test firstName against a comma-separated list of values. Each one must be tested individually and you must use a compound logical operator between them:

if(FirstName !== "Cherry" && FirstName !== "Micheal" &&
   FirstName !== "Sandra" && FirstName !== "Cookie")

You were also using a standard button, rather than a submit button, which can cause all your validation to be bypassed in some situations when the ENTER key is hit. Always use a submit button and validate in the submit event.

Please see my restructured and re-organized code solution for inline comments.

The Stack Overflow snippet environment (below) doesn't work with forms (because it's sandboxed), but the same code can be run here.

// W3C DOM Event model instead of node event properties:
window.addEventListener("DOMContentLoaded", function() {
  
  // Since we're now using the submit event, we hook into that event:
  // Use camelCase for JavaScript identifiers
  var form = getElem("cookieForm");
  form.addEventListener("submit", validate);	
  
  getElem("emailAddress").focus(); 
  
  // Opening curly braces should appear on the same line as the declaration they open
  // Dollar signs are legal identifiers, but usually denote libraries (like JQuery) and
  // can be confusing if you are not using those libraries.
  function getElem (id) {
    return document.getElementById(id); 
  }

  function validate(evt) {   
    var inputs = document.querySelectorAll(".validate");
  
    // It's better logic to assume false, which avoids "false positives"
    var isValid = false;
    
    // Loop through the fields that need validation
    for (var i = 0; i < inputs.length; ++i){
    
      var message = ""; // This is the potential error message
      
      // Validate the input according to its id:
      switch (inputs[i].id) {
          case "firstName" :
            // You can't check a single value against a comma-separated list, you have to check
            // it against each value you are interested in:
            isValid = (inputs[i].value !== "Cherry" && inputs[i].value !== "Micheal" && 
                       inputs[i].value !== "Sandra" && inputs[i].value !== "Cookie") ? false : true;
            message = (!isValid) ? "This person does not exist." : "";
            break;
          case "orderNumber" :
            // Remember, HTML form fields always return strings, not numbers
            isValid = (inputs[i].value !== "3134" && inputs[i].value !== "4234" && 
                       inputs[i].value !== "9234" && inputs[i].value !== "3566") ? false : true;
            message = (!isValid) ? "Invalid Order Number." : "";
            break;
          case "dateOfOrder" :
            isValid = (inputs[i].value !=='12-07-23' && inputs[i].value !== '15-04-24' && 
                       inputs[i].value !== '16-02-01' && inputs[i].value !== '14-01-12') ? false : true;
            message = (!isValid) ? "Date doesn't exist in system" : "";
            break;
          case "emailAddress" :
            isValid = (inputs[i].value != "cherryjackson@gmail.com" && 
                       inputs[i].value !== "michealroberts@yahoo.com" && 
                       inputs[i].value !== "sandrabell@hotmail.com" && 
                       inputs[i].value !== "cookiedanny@outlook.com") ? false : true;
            message = (!isValid) ? "The email doesn't exist" : "";  
            break;        
      }
      
      // Update the UI with the correct message:
      inputs[i].nextElementSibling.textContent = message;
    }
  
    if(!isValid) {
	    // cancel the submission if we're invalid
	    evt.preventDefault();  // Cancel the form's submission
      evt.stopPropagation(); // Don't bubble the event
    }
  }
  
});
body{
       background-color:#FBFBE8;
}

/* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1
  and also centers the first heading */  

h1{
  font-family:Arial, Helvetica, sans-serif; 
  text-align:center;        
}


/* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file
   if one is not available. Also clears some white space 
   from the left margin of the paragraph and finally tells it to give that paragraph
   a size of 20 pixels. */

p {
  font-family:Arial, Helvetica, sans-serif; 
  padding: 20px;
  font-size:20px;  
}

label{
	float: left; 
	width: 11em; 
	text-align: right;
        font-family:Arial, Helvetica, sans-serif; 
        color:#800000;

}
  
input{
  	  margin-left: 1em; 
  	  margin-bottom:.5em; 
}



span {
  	  color: red; 
}

.field_set_1{
              border-color: purple;
              border-style: solid;
}

#form_submission{ background-color:black; color:white; }

legend{ 
   font-family:Arial, Helvetica, sans-serif; 
   color:blue;
} 

/* All of the classes are just for positioning and floating the four 
same images around the form input information   */

.Wrap1{
             float:right;
             margin:40px;
             width:200px; 
             height:200px;
}
.Wrap2{
             float:left;
             margin:40px;
             width:200px; 
             height:200px;
}

.clearfix {
  clear: both;
}
<form id="cookieForm" name="cookieForm" action="submit form.html" method="get">

  <fieldset class="field_set_1">
    <!-- Below sets the title of the form-->
    <legend>Customer Order Form Information:</legend> 


    <!-- Creates the first left label to specify what should be placed in the text box
         the the right of the label. The rest below does the same.-->
 
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" class="validate">
    <span id="firstname_error">*</span><br>

    <label for="orderNumber">Order Number:</label>
    <input type="text" id="orderNumber" name="orderNumber" class="validate">
    <span id="orderNumber_error">*</span><br>
  
    <label for="dateOfOrder">Date of Order:</label>
    <input type="text"  id="dateOfOrder" name="dateOfOrder" class="validate">
    <span id="dateOfOrder_error">*</span><br>

    <label for="emailAddress">Email Address:</label>
    <input type="text" id="emailAddress" name="emailAddress" class="validate">
    <span id="emailAddress_error">*</span><br>

    <label>&nbsp;</label>
  
    <!-- Always use a "submit" button to initiate form submission, even
         if there will be form validation                                 -->
    <input type="submit" id="form_submission" value="Submit this Form">
  </fieldset>

</form>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)