如何從jQuery中獲取html表單的輸入值？

Question

我想問一下，當我在一個頁面上有許多同名的表單時，我是如何從HTML表單中獲取Javascript中的SUBMIT輸入值。

它看起來像這樣：

第一個打印的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>

第二次印刷：

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

像這樣還有更多。

我必須考慮comentonpost的價值，因為我需要在我的Javascript中，所以當我發表評論時，它會出現在提交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形式的comentonpost值而不是第一次打印，這個腳本有什么更好的方法可以工作嗎？

提前致謝！

Answer 1

這將滿足您的需求：

$(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必須在文檔中是唯一的才能有效。

Answer 2

當你使用jquery選擇一個ID時，它將返回0或一個匹配的元素，它將匹配它找到的第一個元素。 來自http://api.jquery.com/id-selector/

使用id選擇器作為參數調用jQuery（）（或$（））將返回包含零個或一個DOM元素集合的jQuery對象。

每當你使用$（“＃submit”）它通過DOM解析並找到<input type="submit" id="submit" value="Submit" />的第一個實例並返回該元素。 您真正希望在搜索范圍內做些什么。 你知道你想要從提交的表單輸入，所以你應該嘗試

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

這將從表單元素開始，並僅搜索表單中包含ID為submit的第一個元素的元素。

更新

並沒有意識到你的活動只與第一種形式有關，這整個事情需要一些工作。

你有一個通用的表單模板，當你有這樣的多個表單時，你真的不應該給它們所有相同的ID。 相反，開始將事件處理程序綁定到類，並使用dom來存儲表單是否“正常”

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

Answer 3

您可能只需要更改此部分：

$(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...

Answer 4

我會建議這樣的事情

$(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並不是一個好策略。