Question

我有一个带有文本输入字段和选项的表单，用户可以在其中添加多个文本输入字段（http://prntscr.com/1dikv3）此屏幕截图将显示其外观。

现在，当使用js添加新字段时，字段的名称是动态的，默认字段具有值字段，新添加的字段将具有field_2，field_3等等...

现在我想获取这些字段的所有值并插入到DB中。我不确定如何使用数组或循环获取所有这些不同命名输入字段的值？

这是我的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/

获取具有不同名称的多个文本输入字段的值？

5 个答案: