使用spin.js的jQuery submit()阻止表单提交?

时间:2016-08-06 23:33:56

标签: javascript php jquery forms spin.js

我有一个提交的表单很好,但是当我添加jQuery代码以使用spin.js显示加载div时,一切都停止工作。

<form id="search_form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
<!-- Form inputs here -->
...
<input id="exam_search" type="submit" name="submit" value="Search" />   

一旦我添加以下代码,表单就会停止提交并且没有任何反应。加载div显示片刻,然后像预期的那样消失,但似乎表单实际上还没有提交。

var opts = // Array of options 
var spinner = null;
$("#search_form").submit(function() {
    spinner_div = document.getElementById('spinner');
    if(spinner == null) {
        spinner = new Spinner(opts).spin(spinner_div);
        $("#search_results, #query").css({"opacity": "0.75"});
        $("#search_form :input").attr("disabled", true);

    } else {
        spinner.spin(spinner_div);
        $("#search_results, #query").css({"opacity": "0.75"});
        $("#search_form :input").attr("disabled", true);
    }
});

如果我将提交事件中的所有代码更改为:

$("#search_form").submit(function() {
    alert ("form submitted");
});

它显示警告,然后返回表单提交的结果就好了。

我在这里做错了什么?

修改 我在jQuery docs中看到了submit(),我不应该使用名称&#34;提交&#34;在输入字段上。我试着改变它,没有运气。

1 个答案:

答案 0 :(得分:0)

嗯,我不确定为什么,只是这样做有效:

$("#search_form").submit(function() {
    var spinner_div = document.getElementById('spinner');
    var spinner = new Spinner(opts);
    spinner.spin(spinner_div);
});