让它起作用
在使用 javascript 做任何事情之前，请先制作一个正常的表单。即使用您想要的任何服务器端语言生成表单，并且当您提交表单时，它应该执行您希望它执行的操作。如果您有一个没有 javascript 的表单，那么您有信心在 js 中断时它总是可以工作。
让它更好地工作/渐进式增强
您的 js 似乎有 2 或 3 个要求 - 单独对待它们：
1. 表单应该一次只显示一个输入
例如，像这样的标记：
<form id="myForm" method="post">
<legend>My Awesome Form</legend>
<div class="question">
<label for="x">X</label>
<input name="x" id="x">
</div>
<div class="question">
<label for="y">Y</label>
<input name="y" id="y">
</div>
<div class="question">
<label for="z">Z</label>
<input name="z" id="z">
</div>
<div class="submit"><input type="submit" value="Submit"></div>
</form>
像这样使用一些js：
$('.question', '#myForm').not(':first-child').hide();
$('input', '#myForm').change() {
var div, next;
div = $(this).parent();
next = div.next();
if ($(this).val() && next.length) {
parent.hide();
next.show();
}
});
一次只显示一个问题 div，并在填充输入时显示下一个（如果有下一个）。
2. 验证用户输入
要验证用户输入，请创建一个为您执行此操作的函数，根据需要返回 true/false 并将其挂钩到您的 js 中，以便在输入值被视为无效时它不会继续：
validate(field, input) {
var valid = false;
// implement your logic here to validate input
if (valid) {
return true
}
return false;
}
$('input', '#myForm').change() {
var div, next;
if (!validate($('this').attr('name'), $(this).val()) {
return;
}
div = $(this).parent();
next = div.next();
if ($(this).val() && next.length) {
parent.hide();
next.show();
}
});
如果当前输入的值无效，这将阻止用户进入下一个输入。
3.通过ajax提交表单
单击提交应该将表单数据发送到服务器，以（几乎）与正常提交表单相同的方式。唯一的区别应该是它使用您解析的 json 响应或您在页面末尾转储的 html 片段进行响应：
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data, textStatus, jqXHR) {
// handle success response
},
error: function(jqXHR, textStatus, errorThrown)) {
// show the user an error
}
});
});
这里写的所有 js 都是未经测试的，它应该给你一些关于如何处理你想做的事情的各个方面的想法——当然，有关任何特定方法的更多信息，请参阅文档。