CODEWITHSUNDEEP
javascriptphpjqueryajax
user2666310
user2666310

Reputation: 103

ajax send value of dynamically created input boxes

I would like to send the values of dynamically generated input boxes to the php page. I got the below code which appends input box on click from another question and was wondering how could I be able to pass the values as an array to php page. can someone help me out?

<fieldset id="buildyourform">
<legend>Build your own form!</legend>
</fieldset>
<button class='sbn'>Add</button><!--this adds input boxes-->
<button class=submit">submit</button>a

$(document).ready(function() {
$(".sbn").click(function() {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
    var fName = $("<input type='text' class='fieldname form-control xd'/>");
    var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
});

$('.submit').click(function(){
    $.ajax({
        method:'POST',
        url:'test.php',
        data:{},
        success:function(response){
            //
        }
    });

 });
 });

Upvotes: 2

Views: 4698

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34416

Corrected many items in the code. Here is the form (with proper form tags added) - 

<form name="myForm" action="" method="post">
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
</fieldset>
</form>
<button class='sbn'>Add</button>
<!--this adds input boxes-->
<button class="submit">submit</button>

Here is the jQuery - 

$(".sbn").click(function () {
    var intId = $("#buildyourform div").length + 1;
    var fieldWrapper = $("<div class='fieldwrapper' id='field' + intId + '>");
    var fName = $("<input name='foo[]' type='text' class='fieldname form-control xd'/>"); // name added to element
    var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
    removeButton.click(function () {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(removeButton);
    $('#buildyourform').append(fieldWrapper);
});

$('.submit').click(function () {
    var formValues = $('.fieldname').serialize(); // gathers all of the form data from the elements with the class fieldname
    $.ajax({
        method: 'POST',
        url: '/echo/html/', // this is for the jsfiddle test, change to your URL
        data: formValues, // put the variable here
        success: function (response) {
            //
        }
    });
});

Most notably here is the addition of a name to the input fields and serializing only the ones that we want. You cannot post an input without a name, it just fails silently. Here is a working example Open the browsers console to see the posted data.

Upvotes: 4

CodeGodie
CodeGodie

Reputation: 12132

Try this:

HTML:

<form>
    <fieldset id="buildyourform">
        <legend>Build your own form!</legend>
    </fieldset>
    <button class='sbn'>Add</button><!--this adds input boxes-->
    <button class="submit">submit</button>
</form>

JS:

$(document).ready(function() {
        $(".sbn").click(function(e) {
            e.preventDefault();
            var intId = $("#buildyourform div").length + 1;
            var fieldWrapper = $("<div class='fieldwrapper' id='field" + intId + "'>");
            var fName = $("<input name='test" + intId + "'' type='text' class='fieldname form-control xd'/>");
            var removeButton = $("<input type='button' class='remove btn btn-primary' value='-' />");
            removeButton.click(function() {
                $(this).parent().remove();
            });
            fieldWrapper.append(fName);
            fieldWrapper.append(removeButton);
            $("#buildyourform").append(fieldWrapper);
        });

        $('form').submit(function(e) {
             e.preventDefault();
            var postdata = $(this).serializeArray();
            $.post('test.php', postdata , function (response) {
                  console.log(response);
                  //
            });
        });
    });

Upvotes: 0

Related Questions