Question

我已创建此表单以输入以下数据：

名称
电子邮件
GPA＃

然后，我在表单中有一个提交按钮，但是信息未提交信息，我也不知道为什么。我已经添加了HTML和CSS，但不确定如何开始构造JavaScript以便提交此表单。

如果有人对我需要添加什么JavaScript以确保提交此表单有任何建议，我将不胜感激。

 /* Samantha Hayes, JavaScript Project, ISLT/7356 Interactive Web Deisgn with JavaScript Project */

 /* Format for all pages and lists and navigation */

body {background-color:	#E6E6FA;
      font-family: Verdana, Tahoma, sans-serif;
      color:#000000}
              
/* the styles for the elements */
body {
	font-family: Arial, Helvetica, sans-serif;
    font-size: 87.5%;
    width: 800px;
    margin: 0 auto;
    border: 3px solid #FFDF00;
    background-color: #fffded;
}
nav a:focus, nav a:hover, article a:hover {
	font-style: italic;
}

/* the styles for the reflection */
header {
	border-bottom: 3px solid #FFDF00;
	padding: 1.5em 0;
	background-image: -moz-linear-gradient(
	    30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
	background-image: -webkit-linear-gradient(
	    30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
	background-image: -o-linear-gradient(
	    30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
	background-image: linear-gradient(
	    30deg, #FFDF00 0%, #fffded 30%, white 50%, #fffded 80%, #FFDF00 100%);
}
.shadow {
	text-shadow: 2px 2px 2px #FFDF00;
}

main {
	clear: left;
	padding: 0 20px 20px;
	width: 525px;
	float: right;
}
main p {
	padding-bottom: .5em;
}
main blockquote {
	padding: 0 2em;
	font-style: italic;
}
main ul {
   list-style-type: none
	padding: 0 0 1.5em 1.25em;
}
main li {
	padding-bottom: .35em;
}

<!--
	Samantha Hayes
	ISLT 4356/7356 Interactive Web Design with JavaScript Project
	December 2018
-->

<link rel="stylesheet" href="hayes_java_project.css">
<script src="gpa_calculation.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<nav>
		<fieldset>
		<legend>Fill out the following Boxes</legend>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name">
		<span>*</span><br>
    	<label for="email">Email:</label>
    	<input type="text" name="email" id="email">
    	<span>*</span><br>
		<label for="gpa">GPA:</label>
		<input type="text" name="gpa" id="gpa" placeholder="#.##">
		<span>*</span><br>
		<input type="button" id="submit" value="Submit GPA">
		<form action="submit.html" method="get"
			name="submit_form" id="submit_form">
		</form>
		<div id="dialog" title="GPA Submitted" style="display: none;">
			<p>Thank you for submitting your GPA to your teacher! Please move to the reflection part of the activity.</p>
		</div><br>    		
	</fieldset>
</nav>

Answer 1

您应该将所有元素都包含在form元素中，而不仅仅是按钮。

    <!DOCTYPE HTML>
    <html lang="en">
<!--
    Samantha Hayes
    ISLT 4356/7356 Interactive Web Design with JavaScript Project
    December 2018
-->
<title>Homeroom GPA Calculatiion: Step 4</title>
<meta charset="utf-8">


<head>
    <link rel="stylesheet" href="hayes_java_project.css">
    <script src="gpa_calculation.js"></script>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<form action="submit.html" method="get"
                name="submit_form" id="submit_form">

        <!-- Nav -->
            <nav>
                <ul class="links">
                    <li><a href="hayes_java_project.html">Home: GPA Calculation Tutorial</a></li>
                    <li><a href="project_why.html"> Why Calculate your GPA?</a></li>
                    <li><a href="project_step_1.html">Step 1: Document Your Grades</a></li>
                    <li><a href="project_step_2.html">Step 2: Convert Grade Percentages to GPA Points</a></li>
                    <li><a href="project_step_3.html">Step 3: Average GPA Point Total to Get GPA</a></li>
                    <li><a href="project_step_4.html">Step 4: Submit GPA for Teachers</a></li>
                    <li><a href="project_reflection.html">Reflection</a></li>
                </ul>
            </nav>

    <h1>HHS Homeroom GPA Calculation: Step 4</h1>
    <h2>Submit GPA for Teachers</h2>
    <p>Using the boxes below, enter your email and your calculated GPA. If you have a request for help, please enter it in the second box below with your email address.</p>
        <br>            
    <nav>

            <fieldset>
            <legend>Fill out the following Boxes</legend>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name">
            <span>*</span><br>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email">
            <span>*</span><br>
            <label for="gpa">GPA:</label>
            <input type="text" name="gpa" id="gpa" placeholder="#.##">
            <span>*</span><br>
            <input type="button" id="submit" value="Submit GPA">


            <div id="dialog" title="GPA Submitted" style="display: none;">
                <p>Thank you for submitting your GPA to your teacher! Please move to the reflection part of the activity.</p>
            </div><br>          
        </fieldset>
    </nav>
    <!--button to next page-->
<br>
    <div class="widget">
        <p>Go on to <button><a href="project_reflection.html">Reflection</a></button></p>
    </div>
<br>
 <footer>
        <small><i>Page created by Samantha Hayes.<br>
        Copyright &copy; 2018 <br>
        Please <a href="mailto:shayes@cpsk12.org">e-mail</a> me with any questions.<br>
        Last updated on December 2018. </i></small>
    </footer>
 </form>
</body>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>

</html>

如何为该表单构造JavaScript以提交数据？

1 个答案: