Question

我想创建一个包含多个问题的表单，每个问题都可以在下一步点击，但页面无法加载

例如

http://www.garmin.com/us/intheair/ads-b/#scroll-to-installation-planner

点击开始

页面没有重新加载，并且选中了每个单选项并单击下一步，也没有加载新页面...我该怎么办？

Answer 1

如果您的按钮不在表单元素中，则不强制您将输入放在表单元素中，然后它不会提交输入数据。
< / LI>
如果您选择将输入放在中，这很好，请不要使用值type指定按钮的属性submit。< / p>
如果您选择<button type="submit"></button>或<input type="submit" />，这是正常的，那么您必须拦截click事件并处理它以实现自定义行为。

这里是：

HTML

<input type="submit" onclick="goNext(event)" />

JS

var goNext = function(e){
    e.preventDefault(); // this stops the button from submitting the form on click

    // so then.. collect the data and put it somewhere safe for later use
    // when you are done collecting inputs, you should submit it manually, using XMLHttpRequest (a.k.a AJAX)
};

什么是XMLHttpRequest？ - 您可以自己找出here。

Answer 2

点击下一步后，请勿重新加载页面。

而是将所有选定的变量存储在javascript变量中，

例如：

var results = []l
$("#next-button").click(function() {
    results.push($("select1").val());
    // push other results to results array
})

然后在结束时，您可以进行ajax调用以提交结果：

$.ajax({
    type: "POST",
    url: "some.php",
    data: results
})
.done(function( msg ) {
    alert( "Data Saved: " + msg );
});

如果您需要更多帮助，请告诉我

（这种方法由jquery促进）

如何创建没有页面重新加载的多提交表单？

2 个答案: