3

検証する必要のあるフォームがあり、ページを更新せずに送信する必要もあります。検証して送信するためのフォームを取得できましたが、ページが更新されました。そして、それなしで送信するフォームを取得することはできましたが、検証を機能させることができませんでした。

私はここでたくさんのチュートリアルと投稿を見てきました、そしてこれは正しい全体的なフォーマットであるように感じます...私は何かが欠けていると確信しています。

どんな助けでも大歓迎です！

これが私のスクリプトです：

$(document).ready(function(){
            $("#addstudent").validate({
                debug: false,
                rules: {
                    studentid: "required",
                    teacher: "required",
                    assignment: "required",
                    date: "required",
                },
                messages: {
                    studentid: "Please enter the student's ID number.",
                    teacher: "Please enter your name.",
                    assignment: "Please select a tutoring assignment.",
                    date: "Please select a day.",
                },                 
                submitHandler: function(form) {

          $.ajax({
              url: 'add.php',
              type: 'POST',
              data: $("form.addstudent").serialize(),         
              success: function() {
            $("#studentid").val(""), $('#studentid').focus(), $('#results').load('addresults.php', function(){
                });

              }
          });

          return false;
       }
    });
    });

そして、これが私のフォームのコードです：

<form name="addstudent" id="addstudent" action="" method="post">

    <fieldset><legend>Add student to tutoring list</legend>
    <div><label for="studentid">ID number</label><input type="text" name="studentid" id="studentid"></div>

    <div><label for="day">Date</label><select name="date" id="date">
    <option value="">Please select a day</option>
    <option value="mon">Monday <? echo $monday; ?></option>
    <option value="tue">Tuesday <? echo $tuesday; ?></option>
    <option value="wed">Wednesday <? echo $wednesday; ?></option>
    <option value="thu">Thursday <? echo $thursday; ?></option>
    <option value="fri">Friday <? echo $friday; ?></option>
    </select></div>

    <div><label for="assignment">Tutoring assignment</label><select name="assignment" id="assignment">
    <option value="">Please select an assignment</option>
    <option value="att">Activity Time</option>
    <option value="acc">ACC</option>
    <option value="tech">ACC Tech </option>
    <option value="ast">After School</option>
    </select></div>

    <div><label for="teacher">Assigning teacher</label><input type="text" name="teacher" id="teacher"></div>

    <input type="submit" name="submit" value="submit">
    </fieldset>
    </form>

編集：最初の編集（現在は削除されています）は、質問を劇的に変更しました。ご不便をおかけしましたことをお詫び申し上げます。以下で選択した回答は、このフォーム自体の問題を解決しました。

4

3 に答える 3

1

と混同しましclassたid。あなたのフォームは次のとおりです。

<form name="addstudent" id="addstudent" action="" method="post">

しかし、あなたはそれを次のようにターゲットにしましたclass:

data: $("form.addstudent").serialize(),

いつターゲットにする必要がありますかid:

data: $("form#addstudent").serialize(),

またはより簡潔に：

data: $("#addstudent").serialize(),

作業デモ:

http://jsfiddle.net/5UqRm/2/

さわやかなものは何もないことに注意してください。

于 2012-12-20T22:16:41.407 に答える
0

私はあなたのコードを試しましたが、1つの変更だけで正常に動作します：

data: $("#addstudent").serialize()

持っているかどうかは関係ありreturn falseません。

submitHandlerのajaxの成功ハンドラーにこれを含めることで何を達成しようとしているのかわかりません。

`$('#results').load('addresults.php', function(){});`

add.phpからの出力をエコーバックして、に追加.done(function(data){}して使用してみません$.ajax({})か？

...あなたの例には#results要素が含まれていないので、おそらくそれがあなたのリフレッシュを引き起こしていますか？例えばあなたが持っているなら<body id="results">:-)!!

于 2012-12-20T22:22:28.203 に答える
0

以前と同じようにフォーム ルールと検証をセットアップしますが、submitHandler は含めません。私はそれに何か問題があると言っているわけではありませんが、あなたがやろうとしていることを行う方法を私が知っている方法は次のとおりです。

$("form.addstudent").submit(HandleSubmit);
    function HandleSubmit(e) {
    e.preventDefault();
    $.ajax({
        url: 'add.php',
        type: 'POST',
        data: $("form.addstudent").serialize(),
        success: function () {
            $("#studentid").val(""), $('#studentid').focus(), $('#results').load('addresults.php', function () {
            });

        }
    });
}

ここにフィドルがあります

于 2012-12-20T22:10:26.677 に答える