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コールバック関数内の最後の項目としてa を追加する必要があります。を追加した後もページが再読み込みされる場合は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 に答える