獲取具有不同名稱的多個文本輸入字段的值？

Question

我有一個帶有文本輸入字段和選項的表單，用戶可以在其中添加多個文本輸入字段（ http://prntscr.com/1dikv3 ）。此屏幕快照將顯示它的外觀。

現在，當使用js添加新字段時，該字段的名稱是動態的，例如默認字段具有value字段，而新添加的字段將具有field_2，field_3，依此類推...

現在，我想獲取這些字段的所有值並將其插入數據庫。 我不確定如何使用數組或循環獲取所有這些不同命名輸入字段的值？

這是我的JS代碼：

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    }); });

如果有人可以指導我，我將很感激。

謝謝

Answer 1

除非您需要區分不同的字段，否則對所有字段使用相同的名稱，后綴[] 。 這將導致PHP將它們視為$ _POST數組中的數組。 您也可以從每個新字段中刪除ID。 ID應該是唯一的，在這種情況下，您始終不會使用它們。

因此，您的功能變為：

$(function() {
var scntDiv = $('#p_scents');

$('#addScnt').live('click', function() {
        $('<p><label for="p_scnts"><input type="text" size="20" name="p_scnt[]" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        return false;
});

$('#remScnt').live('click', function() { 
        if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
        }
        return false;
}); });'

現在，您可以在PHP腳本中以$_POST['p_scnt']的數組的形式訪問這些字段。

Answer 2

您能給所有輸入一個特定的類嗎？ 如果是這樣的話：

var answers = {};
$(".theClass").each(function() {
    var fieldName = $(this).prop("name");
    answers[fieldName] = $(this).val();
});

現在，您有了一個包含輸入名稱和答案的對象。

如果您不能給他們提供課程，則可以使用$("input[type='text']").each(... ，但我不知道頁面上是否還有其他文本輸入。您可以，也許可以將它們放入具有特定類的div中，然后使用$(".myDiv").find("input[type='text']").each(...

Answer 3

當然，當您知道要復制的內容時，請不要使用ID。 簡而言之，將它們更改為類。

標記

$（'。p_scents'）//使用一個類

碼

$(function() {
    var scntDiv = $('.p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });
 });

Answer 4

如果我理解正確，您是否希望PHP遍歷所有這些字段進行存儲？ 嘗試這個：

foreach( $_REQUEST as $name=>$value) {
    if( strncmp($name, "p_scnt_", 7) == 0) {
        ... do something with $value ...
    }
}

或者，您可以使用剛剛出現的Mike W的答案；）

Answer 5

正如Mike W的答案所指出的，還要確保，如果輸入的名稱相同，請確保在名稱后包含[] ，以便將它們收集為數據數組。

---

如果您所有的輸入都采用某種形式，那么我建議您使用$.ajaxForm類的東西。 這個插件使使用表格變得非常容易。 它還包含ajax，這意味着您可以完全控制之前，之后以及之間的所有操作。

一個基本的例子：

$('#myFormID').ajaxForm({
    target: '#outputID',    //  this would be an element where you might want the echoed data to display, such as "Success!" or "ERROR 404" //  this is not required
    beforeSubmit: function(formData, jqForm, options) {
        //  if you return false, the form will not submit, so you can validate form here
        var $return = true;
        //  formData is an array of your input and textarea values
        //  you can manipulate this object or make a straight call like:
        //  also, try using `console.log(formData); return false;` 
        //  and look to make sure the form data being submitted is as you want it
        $("#myFormID input[type=text]").each(function(i) {
            if (somethingIsWrong) {
                $return = false;
            }
        });
        return $return;
    },
    success: function(response, status, xhr, $form) {
        //  response is of course what your back end echoes back
        console.log(response);
        alert(status);
    }
})

同樣，那個不錯的jQuery插件是http://malsup.com/jquery/form/