1

I have a form with a text input field and option where user can add more than one text input fields (http://prntscr.com/1dikv3) This screenshot will show how it looks.

Now when ever a new field is added using js the name of the field is dynamic say default field has value field and new added field will be have field_2,field_3 and so on...

Now I want to get all the values of these field and insert into DB. I am not sure how can I get the values of all those different named input fields using array or loop?

Here is my JS code:

$(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;
    }); });

If someone can please guide me I will be thankful.

Thanks

4

5 回答 5

2

除非您需要将不同的字段彼此区分开，否则请对所有字段使用相同的名称，并以 . 为后缀[]。这将导致 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']

于 2013-07-04T14:50:27.897 回答
0

如果我理解正确，您希望 PHP 循环遍历所有这些字段来存储它吗？尝试这个：

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

或者，您可以选择 Mike W 刚刚进来的答案；）

于 2013-07-04T14:56:02.647 回答
0

你能给所有的输入一个特定的类吗？如果是这样：

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

于 2013-07-04T14:42:08.847 回答
0

当然，当您知道内容将被复制时，不要使用 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;
    });
 });
于 2013-07-04T14:42:35.790 回答
-1

正如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/

于 2013-07-04T14:50:09.667 回答