0
フォームの「このフォームを送信する」ボタンが、<form ... action="submit form.html" method="get">属性で指定した別のHTMLページに私を連れていかない理由を理解しようとしていますが、私は最初の名前、電子メールアドレス、注文日、JavaScriptを使用してif-elseコードで指定したJavaScriptメッセージは返されません。私のフォーム送信ボタンがクリックされたときに次のページに移動しないのはなぜですか？
ここでは、フォームで使用するJavaScriptコードを示します。
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 !="[email protected]", "[email protected]",
"[email protected]", "[email protected]")
{
$("email_address_error").firstChild.nodeValue="The email doesn't exist";
isValid=false;
} else{ $("email_address_error").firstChild.nodeValue="";}
if(isValid)
{
\t //submit the form if all entries are valid
\t $("cookie_form").submit();
}
}
window.onload = function()
{
$("form_submission").onclick = submitForm; \t
$("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;
\t 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{
\t float: left;
\t width: 11em;
\t text-align: right;
font-family:Arial, Helvetica, sans-serif;
color:#800000;
}
input{
\t margin-left: 1em;
\t margin-bottom:.5em;
}
span{
\t 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> </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>
私はちょうどスコット・マーカスをしました – Joe