如何使用jQuery Ajax指定正確的輸入以提交多種形式（可變數字）

Question

我有一個包含多種形式的網頁。 表單是動態生成的，表單的數量也有所不同。

我正在使用jQuery AJAX提交表單而不刷新頁面，但是它沒有為某些表單提交正確的信息。 我的問題是jQuery似乎只從頁面上的第一種形式獲取信息。 因此，如果第一個表單的<input value="sentence A" name="sentence"> ，則即使頁面上的其他表單應具有不同的句子關聯，“句子A”也將作為所有表單的句子提交。跟他們。

我已經看到了一些涉及使用表單ID的多表單jQuery解決方案，但是我認為我不能使用ID，因為表單是生成的並且數量是變化的。

我們歡迎所有的建議！ 下面提供了我的jQuery和一個示例表單html。

我正在使用以下jQuery在頁面上提交表單（基於本教程 ）

$(document).ready(function() {
$(".button").click(function() {
    var gene1 = $.trim( $("input.gene1").val() );
    var gene2 = $.trim( $("input.gene2").val() );
    var sentence = $.trim( $("input.sentence").val() );
    var suggested_label = $.trim( $("input.suggested_label").val() );

    var dataString = 'gene1='+gene1 + '&gene2=' + gene2 + '&sentence=' + 
    sentence + '&suggested_label=' + suggested_label;

    $.ajax({
        type : "POST",
        url : "/submit_label",
        data : dataString,
        success : function(){
            alert(dataString);
        }
    });

    return false;
});
});

我的表格如下所示。 在給定的頁面上，句子和建議的標簽的表單內容將有所不同。

<form action="" name="label_form">
<input value="  5058 " name="gene1" type="hidden" class="gene1">
<input value="  8411 " name="gene2" type="hidden" class="gene2">
<input value="To further demonstrate..." name="sentence" type="hidden" class="sentence">
<div class="textbox">
    <input placeholder="Suggested Label" name="suggested_label" type="text" class="suggested_label">
</div>
<div>
    <button class="button">Submit</button>
</div>
</form>

Answer 1

這里的問題是，您有多個輸入class gene1 ，多個輸入類gene2 ，等等...正如您提到的，當您調用$("input.gene1").val() jQuery返回的值。 首先將input與class gene1匹配。

您要在此處選擇類gene1的input ，該input與被單擊的按鈕最接近 。 您可以通過從按鈕開始並運行DOM結構來實現

例如，在您的代碼中，替換

var gene1 = $.trim( $("input.gene1").val() );

同

var gene1 = $.trim( $(this).parent().siblings("input.gene1").val() );

對其他輸入依此類推

describe_label輸入是嵌套的，因此需要額外的努力：您可以使用children()方法：

var suggested_label = $.trim($(this).parent().siblings("div").children("input.suggested_label").val());

注意 ： $(this)表示此上下文中的單擊按鈕

這是一個完整的例子

Answer 2

我認為從概念上講，解決方案如下：

1. 循環瀏覽頁面上的表單（使用$('form').each( function(){ ... }) ）
2. 保留一個計數器以動態分配每個表單的ID（設置一個變量，如var formNum = 0 ，然后在表單循環中的每個迭代中添加一個變量，例如： formNum++ ）
3. 然后，執行.attr('id','ajax_form_' + formNum)
4. 現在，您可以引用每個特定表單的字段： $('#ajax_form_' + formNum + ' input[name="sentence"])...

讓我知道您是否需要更多有關此操作的指導！