1

我试图在提交后将表单发送到 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>

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

4

2 回答 2

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/

于 2013-02-02T21:06:35.710 回答
0

尝试添加

return false;

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

于 2013-02-02T06:55:32.510 回答