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

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

Unless you need to distinguish the different fields from one another, use the same name for all, suffixed with []. This will cause PHP to treat them as an array in your $_POST array. You can remove the ID from each new field too. IDs should be unique, and in this instance you're nt using them anyway.

So your function becomes:

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

In your PHP script you can now access these fields as an array in $_POST['p_scnt']

Can you give all the inputs a particular class? If so:

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

Now you have an object with the input names and the answers.

If you can't give them a class, you could use $("input[type='text']").each(..., but I don't know if you have other text inputs on the page. If you do, maybe you could put them in a div with a certain class and use $(".myDiv").find("input[type='text']").each(...

Sure, don't use ID's when you know the content is going to be replicated. In short, change them to classes.

markup

$('.p_scents') //use a class

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

As pointed out in Mike W's answer, also make sure, if inputs are getting the same name, be sure to include [] after the name so that they will be gathered as an array of data.

If all your inputs are in a form, then I would suggest using something like $.ajaxForm. This plugin makes working with forms EXTREMELY easy. It also incorporates ajax, meaning you completely control the before, after and everything in between.

A basic example:

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

Again, that nice jQuery plugin is http://malsup.com/jquery/form/

If I understand you correctly, you want PHP to loop through all these fields for storing it? Try this:

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

Or, you could go with Mike W's answer which just came in ;)