我试图阻止用户继续前进，除非他们提交了表格。因此，我已经隐藏了按钮，并且一旦提交表单，它们应该一一出现。我已经为第一个按钮添加了代码，但是提交后没有显示出来。我的onsubmit代码错误吗？欢迎任何见识。
$(document).ready(function(){
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto')
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
});
$(document).ready( function() {
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#today').val(today);
});
function checkForm(form) {
var inputs = form.getElementsByTagName('input');
x=0;
for (var i = 0; i < inputs.length; i++) {
if ((inputs[i].value != "") || (inputs[i].value.checked)){
x=0;
}
else{
alert("Please answer all quesions");
x=1;
}
if(x==1){
event.preventDefault();
}
}
}.btn {
position: static;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<Html>
<head>
<title>Questionaire</title>
<link rel ="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="welcome">
<h3>Please fill in the blanks below and place a tick in the box beside the choice that applies to you.</h3>
</div>
<div id="b" style="display:none;">
<div class="container">
<form action="" onsubmit="return checkForm(this)">
Name of school: <input type="text" name="school"><br><br>
class: <input type="number" name="class" value="7"><br><br>
Today's Date <input type="date" id="today"><br><br>
<input type="submit" value="Submit" onsubmit="document.getElementById('btn1').style.display='block';">
</form>
</div>
</div>
<div id="d" style="display:none;">
<div class="container">
<form action="/action_page.php" onsubmit="return checkForm(this)">
Date of Birth: <input type="date" name="bday"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="c" style="display:none;">
<div class="container">
<p>How old are you?</p>
<form action="" onsubmit="return checkForm(this)"">
<input type="radio" name="class" value="10 years old">10 years old<br>
<input type="radio" name="class" value="11 years old">11 years old<br>
<input type="radio" name="class" value="12 years old">12 years old<br>
<input type="radio" name="class" value="13 years old">13 years old<br>
<input type="radio" name="class" value="14 years old">14 years old<br>
<input type="radio" name="class" value="15 years old">15 years old<br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<br>
<br>
<div>
<button class="btn" data-linkedto="#b">start</button>
<button class="btn" id="btn1" data-linkedto="#d" style="display:none;">1</button>
<button class="btn" data-linkedto="#c" style="display:none;">2</button>
</div>
</body>
</Html>
答案 0 :(得分：1)
正在发生的事情是您的表单正在提交。
这是因为您没有阻止x != 1时默认提交表单。您希望一直停留在页面上直到“最后一次”表单，因此您需要在每次单击按钮（最后一次）时event.preventDefault()。
也就是说，每个请求只能提交一份表格，并且您可以提交多个表格。要在单个POST中获取所有信息（对于这种类型的信息，我建议使用method =“ POST”（表单属性）），您需要制作一个表单（或者您可以在后台通过JavaScript提交表单） ，但在整个HTML页面中仅使用一种大格式肯定会更容易）。拆分它，也许使用<fieldsets></fieldsets>，然后使用要使用的任何JavaScript / jQuery逻辑显示/隐藏这些字段集。
作为一般说明：尝试先使用没有 javascript进行类似的工作。然后添加javascript以使体验更好。您刚刚学会了渐进增强；）祝您好运！
答案 1 :(得分：1)
您可以使用ajax代替常规方式提交表单。这样，页面将不会重新加载，您的JavaScript代码也将执行。
这是第一种形式的工作方式示例。我希望这会有所帮助：）
我给表单提供了一个form0的id，并且每个输入字段都有唯一的id（因此我们可以为ajax请求检索它们的值）。
<div id="b" style="display:none;">
<div class="container">
<form id="form0" method="post" action="">
Name of school: <input type="text" name="school" id="school"><br><br>
class: <input type="number" name="school_class" value="7" id="school_class"><br><br>
Today's Date <input type="date" id="today"><br><br>
<!--when the following submit button is clicked the button with id 'btn1' is displayed.
Note: You could execute this javaScript code in the callback of the ajax request instead-->
<input type="submit" value="Submit" onclick="document.getElementById('btn1').style.display='block';">
</form>
</div>
</div>
<div>
<button class="btn" id="btn0" data-linkedto="#b">start</button>
<button class="btn" id="btn1" data-linkedto="#d" style="display:none;">1</button>
<button class="btn" id="btn2" data-linkedto="#c" style="display:none;">2</button>
</div>
$(document).ready(function(){
//This is your own code here
var now = new Date();
var today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate();
$('#today').val(today);
//This is your own code here
$('.btn').click(function(){
var linkedDiv = $(this).data('linkedto');
console.log($('div.container').parent('div'));
$('div.container').parent('div').hide();
$(linkedDiv).show();
});
//my solution code here
$("#form0").on("submit", function(e){
//Note: make sure this function is inside $(document).ready() function
//Firstly prevent the form from submitting so that the page doesn't reload.
e.preventDefault();
//get our form input values by their IDs so we can send the values with the ajax request.
var school = $("#school").val();
var schoolClass = $("#school_class").val();
var todaysDate = $("#today").val();
//validate our values here.
//prepare the data to send to the server (our PHP script) in our ajax request.
//The properties (e.g 'school') in this object will be retrievable in PHP with $_POST['school'] etc.
var params = {'school': school, 'schoolClass' : schoolClass, 'todaysDate' : todaysDate};
//make the ajax request to our action_page.php
$.ajax({
url: 'action_page.php',
data: JSON.stringify(params),
type: "POST",
dataType: "json",
success: function(data){
//the ajax request was successful
var result = data;
console.log(result);
//We could use javascript to hide the current form and show the next button here.
},
error: function(xhr, status, error) {
//an error occured in the request so handle it here
}
});
});//end of form onsubmit function
});
我创建了一个非常基本的php脚本，以便您可以看到它在您的服务器上正常工作
<?php
if(!empty($_POST)){
//the following variables should be set $_POST['schoolClass'], $_POST['school'], $_POST['todaysDate'] so we can do whatever we want with them here.
//prepare an array to send back data to the client side
$data = array();
$data['status'] = "success";
echo json_encode($data);
}
?>