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

Question

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

现在，当使用 js 添加新字段时，该字段的名称是动态的，例如默认字段具有值字段，而新添加的字段将具有 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/