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

您需要在插件的return false回调函数中添加submitHandler作为最后一项。如果在您添加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函数被注释掉以防止jsFiddle 404错误，因为我们无法访问您的process.php文件。

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

Answer 2

尝试添加

return false;

来自您的submitHandler函数的

。我认为由于您通过ajax发布表单，因此需要阻止默认功能发生

submitHandler不断重新加载页面

2 个答案: