1

送信時にのみフォームの入力の値を取得するにはどうすればよいですか? 私はこれを持っています..

<form id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">
  <input type="hidden" value="<?PHP echo $PostID;?>" name="comentonpost" id="comentonpost"/>
  <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
  <input type="submit" id="submit" value="Submit" />
</form>

$PostIDページに印刷されるすべてのフォームで異なる番号であるため、ページ上のすべてのフォーム名が異なります。HTML では、次のようになります。

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

<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>

2 番目の印刷:

<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>

comentonpost次のように、javascript で id 値を取得しています。

$(document).ready(function(){
  var name_element = document.getElementById('comentonpost');
  var x = name_element.value;
});

この値が必要なので、次のスクリプトは新しいコメントを配置します #addCommentContainer'+x

これが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

3 に答える 3

1

jQuery を使用しているため、「attribute starts with」セレクターを使用してフォームを選択し、.serialize()または.serializeArray()メソッドを使用してフォーム全体のデータを取得できます。

$('[id^="addCommentForm"]').on('submit', function (e) {
    var formData;
    //as string i.e. foo=bar&fizz=buzz
    formData = $(this).serialize();

    //as array i.e. [{name: 'foo', value: 'bar'}, {name: 'fizz', value: 'buzz'}]
    formData = $(this).serializeArray();
    e.preventDefault();
});

フォーム内の単一フィールドのデータについては、単純にフィールドを選択して呼び出すことができます.val():

fieldVal = $('#comentonpost').val();

そうは言っても、すべてのフォームに共通のクラスを追加して、それを選択する方が良いでしょう:

PHP: 
<form class="add-comment-form" id="addCommentForm<?PHP echo $PostID;?>" method="post" action="">
JS: 
$('.add-comment-form').on('submit'...

スペルに注意してください。フォームには使用しましたが、フィールドには使用しました。addCommentformcomentonpost

于 2013-06-02T19:58:00.717 に答える
0

次のようにプロパティをフォームに追加onsubmitします。

<form id="addCommentForm<?php echo $PostID;?>" method="post" action="" onsubmit="doSomething(this, event)">
    <input type="hidden" value="<?php echo $PostID;?>" name="comentonpost" id="comentonpost"/>
    <textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
    <input type="submit" id="submit" name="submit" value="Submit" />
</form>

JavaScript:

var working = false;

function doSomething(elm, e) {
    var form    = elm,
        x       = form.comentonpost.value,
        submit  = form.submit;

    e.preventDefault();
    if (working) return false;
    working = true;
    submit.value = 'working..';
    $('span.error').remove();

    $.post('comment.submit.php', $(form).serialize(), function (msg) {
        working = false;
        submit.value = 'submit';
        $(msg.html).hide().insertBefore('#addCommentContainer' + x).slideDown();
    }, 'json');

}

jsfiddle

于 2013-06-02T19:45:22.103 に答える
0

まず、無効な XML があることを指摘させてください。属性はid一意である必要があります。ただし、comentonpost入力はすべて同じidです。ページにこれらのフォームを複数配置するつもりであるように思われるため、これらのフォームidはあいまいです。代わりにidを使用する必要がありますclass。(同じことがあなたの idsbodyとにも当てはまりますsubmit。)

この修正に基づいて、必要なことを行う jQuery 関数を次に示します。

$(document).ready(function(){
    $("form").submit(function(eventObject){        
        var commentOnPost = $(this).find(".comentonpost");
        var x = $(commentOnPost[0]).val();
        alert(x); // for debuggin prompts the found value
        return false; // this will prevent form submit - you might have to remove it
    });
});

デモはこちら

于 2013-06-02T20:17:46.040 に答える