CODEWITHSUNDEEP
javascriptjqueryhtmlformscss
nlopez
nlopez

Reputation: 538

Jquery - dynamically added input field doesn't send value to post

I have this particular jquery code to add/remove fields on a form and then send its values: 

$(document).ready(function() {
    $("#add").click(function() {

        var intId = $("#reglas div").length + 1;
        var fieldWrapper = $('<div class="fieldwrapper" id="field' + intId + '"/>');
        var fName = $('<input align="left" type="text" placeholder="Path" class="reglas_wrapper" id="path" name="field1_' + intId + '" required /> ');
        var fName2 = $('<input type="text" class="reglas_wrapper" placeholder="TTL" id="ttl" name="field2_' + intId + '" required />');
        var removeButton = $('<input align="right" type="button" id="del" class="remove" value="-" /> <br><br>');


        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(fName);
        fieldWrapper.append(fName2);

        fieldWrapper.append(removeButton);
        $("#reglas").append(fieldWrapper);

    });

    $("#cache").each(function() {
        $(this).qtip({
            content: {
                text: $(this).next('.tooltiptext')
            }
        });
    });
});

$('#formsite').on('submit', function (e) {
    //prevent the default submithandling
    e.preventDefault();
    //send the data of 'this' (the matched form) to yourURL
    $.post('siteform.php', $(this).serialize());
});

In which you can add/remove fields on the Cache section but the form sends every value except those which were added dynamically.

How can I solve it? You can see the posted form data with Firebug.

Here is a JS Fiddle for you: http://jsfiddle.net/34rYv/121/

Also I realized that when I delete fields, its name doesn't rename. Maybe you can help me with this too :)

Thanks in advance Nicolas

Upvotes: 3

Views: 2454

Answers (1)

Andy
Andy

Reputation: 3012

Your Cache section stands outside the <form> tags as i see in the source code, so that could be why your fields are not submitted.

Put your form around the left/right div like this:

<div id="wrapper" align="center">
    <div class="container" align="center">
        <form id="formsite"> // your form starts here
            <div id="left">
            </div>
            <div id="right">
            </div>
        </form>    
    </div>
</div>

Instead of this ( what you have right now ):

<div id="wrapper" align="center">
    <div class="container" align="center">
        <div id="left">
            <form id="formsite"> // your form starts here
            // the form will automatically be closed in this div
        </div>
        <div id="right">
            </form>  // this one will go away
        </div>
    </div>
</div>

Also, try to keep your code clean, For example:

var fieldWrapper = $('<div></div>',{
        class: 'fieldwrapper',
        id: 'field'+intId
    });

This is way cleaner than:

var fieldWrapper = $('<div class="fieldwrapper" id="field' + intId + '"/>');

Upvotes: 3

Related Questions