0


1 つのページに同じ名前のフォームが多数ある場合、HTML フォームから Javascript の送信のみで入力の値を取得する方法を知りたいです。

次のようになります。

最初に印刷された HTML フォーム:

<div id="addCommentContainer3">
<form class="add-comment-form" id="addCommentForm3" method="post" action="">
<input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>

2 番目の印刷:

<div id="addCommentContainer2">
<form class="add-comment-form" id="addCommentForm2" method="post" action="">
<input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>

このように、他にもたくさんあります。

Javascriptで値がcomentonpost必要なので、コメントを投稿するaddCommentContainerと、送信されたフォームの前に表示されるため、値を取得する必要があります。
そして、Javascript全体があります：

$(document).ready(function(){

var name_element = document.getElementById('comentonpost');
var x = name_element.value;

/* The following code is executed once the DOM is loaded */

/* This flag will prevent multiple comment submits: */
var working = false;

/* Listening for the submit event of the form: */
$('#addCommentForm'+x).submit(function(e){

    e.preventDefault();
    if(working) return false;

    working = true;
    $('#submit').val('Working..');
    $('span.error').remove();

    /* Sending the form fileds to submit.php: */
    $.post('comment.submit.php',$(this).serialize(),function(msg){

        working = false;
        $('#submit').val('Submit');


            /* 
            /   If the insert was successful, add the comment
            /   below the last one on the page with a slideDown effect
            /*/

            $(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();


    },'json');

});

  });

このようにして、送信ボタンを押すと、ページに印刷された最初のフォームに対してのみ機能します。


私の質問は、どうすればこれを修正できますか? comentonpost最初に印刷されたフォームではなく、送信されたフォームの値のみを取得するにはどうすればよいですか?このスクリプトが機能するより良い方法はありますか?

前もって感謝します！

4

4 に答える 4

2

これはあなたが必要とすることをします：

$(document).ready(function(){
    /* Watch OnSubmit for all forms */
    $('form').submit(function(e){
        e.preventDefault();

        /* Show the 'commentonpost' for the submitted form */
        alert($(this).children('#comentonpost').val());
    });
});

これは機能しますが、同じ ID を持つ要素があるため、ドキュメントが有効ではないことに注意してください。ID が有効であるためには、ドキュメント内で一意である必要があります。

于 2013-06-02T23:08:58.470 に答える
0

jquery を使用して ID を選択すると、一致する 0 個または 1 個の要素が返され、最初に見つかった要素と一致します。http://api.jquery.com/id-selector/から

id セレクターを引数として jQuery() (または $()) を呼び出すと、0 個または 1 個の DOM 要素のコレクションを含む jQuery オブジェクトが返されます。

$("#submit") を使用するたびに、DOM を解析し、<input type="submit" id="submit" value="Submit" />その要素の最初のインスタンスを見つけて返します。検索範囲を絞り込むために本当にやりたいこと。送信されたフォームからの入力が必要なことがわかっているので、試してみてください

$(this).find("#submit")

これはフォーム要素から始まり、フォーム内に含まれる要素のみを検索して、送信の ID を持つ最初の要素を探します。

アップデート

あなたのイベントが最初のフォームにのみ関連付けられていることを認識していませんでした。このすべてに何らかの作業が必要です。

汎用フォーム テンプレートがあり、このような複数のフォームがある場合、それらすべてに同じ ID を与えるべきではありません。代わりに、クラスへのイベント ハンドラーのバインドを開始し、dom を使用して、フォームが「機能している」かどうかも格納します。

http://jsfiddle.net/neKdz/3/

于 2013-06-02T22:47:53.377 に答える
0

私はこのようなものを提案します

$(document).ready(function(){
    $(".add-comment-form").submit(function(e){
        var x = $(this).find("#comentonpost").eq(0).val();
        // now you have number x of submitted form and you can do the rest
    }); 
});

編集：

フォーム送信によるページのリロードを防ぐには、onSubmit="return false;" を追加します。フォーム要素、例えば:

<form class="add-comment-form" id="addCommentForm3" method="post" action="" onSubmit="return false;" >

しかし、このため、クリック イベントを使用する別のアプローチに従う必要があります。

$(document).ready(function(){
    $("#submit").click(function(e){
        var x = $(this).parent(".add-comment-form").eq(0).find("#comentonpost").eq(0).val();
        // now you have number x of submitted form and you can do the rest
    }); 
});

クリックイベントと送信イベントのキャンセルの組み合わせが機能するはずです。しかし、念のために言っておくと (これは既に知っているはずですが、そうする理由があると想像できます)、複数の html 要素で同じ id を使用するのは良い戦略ではありません。

于 2013-06-02T23:12:32.877 に答える
0

この部分だけを変更する必要があるかもしれません:

$(document).ready(function(){
  /* The following code is executed once the DOM is loaded */

  /* This flag will prevent multiple comment submits: */
  var working = false;

  /* Listening for the submit event on all the forms: */
  $('form[id^=addCommentForm]').on('submit', (function(e) {
    var submitted_form = $(this);
    //etc...
于 2013-06-02T23:01:25.597 に答える