submitHandler不断重新加载页面

Question

我试图在提交表单后将其发送到php文件，并在不重新加载页面的情况下检索值。它已经很好地工作了一段时间，但现在我无法让它工作。我有多个页面在做类似的任务，其中2个非常好，但其他3个没有。。。

我一直在反复检查代码，但找不到问题所在。我还注意到，当我单击提交时，我在表单中输入的值只会进入浏览器的地址栏，页面会重新加载，甚至不会进入php文件。

这是JS:

    <script type="text/javascript">
            $(function(){
                    $("#myform").validate({
                        submitHandler: function(form) {
                            // do other stuff for a valid form
                            $.post('process.php', $("#myform").serialize(), function(data) {
                                $('.results').html(data).show(); // you can chain for efficiency
                            });
                        }
                    });
                });
        </script>

和HTML对不起长度：

    <form id = 'myform'>
                <fieldset>
                    <legend>College GPA Calculator</legend>
                    <div class = 'btn-container'>
                        <button class = "btn btn-info" type = 'button'id = "add">Add Row </button>
                        <button class = "btn btn-info" type = 'button'id = "remove"> Remove Row</button>
                    </div>
<table>
                        <tr> 
                            <th> Class Name </th> <th> Units </th> <th> GPA </th>
                        </tr>
                        <tr>
                            <td> <input class = 'input-medium'type = 'text' placeholder = "Optional"> </td> 
                            <td> <input class = 'input-small'type = "text" name = "units[]" placeholder = "Units Earned"> </td>
                            <td> 
                                <select class = 'selectpicker' name = "grades[]" >
                                    <option value = "0"> SELECT </option>
                                    <option value = "A"> A </option>
                                    <option value = "AMINUS"> A- </option>
                                    <option value = "BPLUS"> B+ </option>
                                    <option value = "B"> B </option>
                                    <option value = "BMINUS"> B- </option>
                                    <option value = "CPLUS"> C+</option>
                                    <option value = "C"> C </option>
                                    <option value = "CMINUS"> C- </option>
                                    <option value = "DPLUS"> D+ </option>
                                    <option value = "D"> D </option>
                                    <option value = "DMINUS"> D- </option>
                                    <option value = "F"> F</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td> <input class = 'input-medium'type = 'text' placeholder = "Optional"> </td> 
                            <td> <input class = 'input-small'type = "text" name = "units[]" placeholder = "Units Earned"> </td>
                            <td> 
                                <select class = 'selectpicker' name = "grades[]" >
                                        <option value = "0"> SELECT </option>
                                    <option value = "A"> A </option>
                                    <option value = "AMINUS"> A- </option>
                                    <option value = "BPLUS"> B+ </option>
                                    <option value = "B"> B </option>
                                    <option value = "BMINUS"> B- </option>
                                    <option value = "CPLUS"> C+</option>
                                    <option value = "C"> C </option>
                                    <option value = "CMINUS"> C- </option>
                                    <option value = "DPLUS"> D+ </option>
                                    <option value = "D"> D </option>
                                    <option value = "DMINUS"> D- </option>
                                    <option value = "F"> F</option>
                                </select>
                            </td>
                        </tr>

                    </table>
                    <div class = 'bottomCalcResults'>
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button class = 'btn btn-warning' id = 'reset'type = 'reset'>Reset</button>
                        <div class = 'results'></div>
                    </div>
                </fieldset>
            </form>

以下是安装脚本：

<link rel = 'stylesheet' type = 'text/css' href = 'assets/css/style.css' media = "screen">
        <link rel= 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>    
        <link rel = 'stylesheet' type = 'text/css' href = 'assets/css/normalize.css'>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script src = "assets/js/dropdown.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

我不知道发生了什么事，但我似乎找不到！请帮忙！谢谢

Answer 1

您需要在插件的submitHandler回调函数中添加一个return false作为最后一项。如果添加return false后页面仍在重新加载，则说明您没有正确添加它。

这是放置return false;:的位置

$(function () {
    $("#myform").validate({
        submitHandler: function (form) {
            $.post('process.php', $("#myform").serialize(), function (data) {
                $('.results').html(data).show();
            });
            return false; // <- last item inside submitHandler function
        }
    });
});

工作演示：http://jsfiddle.net/2QspF/

jsFiddle演示和实际代码之间的唯一区别是，$.post函数被注释掉，以防止jsFiddle404错误，因为我们无法访问您的process.php文件。

旁注：您还应该能够使用$(form).serialize()来代替$("#myform").serialize()。请参阅：http://jsfiddle.net/L7vLt/

Answer 2

尝试添加

return false; 

来自您的submitHandler函数。我认为由于您是通过ajax发布表单的，因此需要防止默认功能发生