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

Question

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

your "Cache" section stands outside the "<form>" tags so i guess thats why it does not submit. — Andy
– Andy, Commented Dec 13, 2013 at 14:12

Andy · Accepted Answer · 2013-12-13 14:32:30Z

3

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 + '"/>');

edited Dec 13, 2013 at 14:32

answered Dec 13, 2013 at 14:19

Andy

3,0222 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nlopez Over a year ago

How should I put the cache div in order to stand inside the <form>? Because {<textarea name="config_nota"} is at the same level and it is taken into account by the <form>

nlopez Over a year ago

Great! thanks a lot!! One more question, how should I manage the names of the removed fields in order not to supperpose?

Andy Over a year ago

You can always use an array for example: name="caches[0]['path']", name="caches[0]['ttl'] , where 0 stands for the id of the row, so the fields stay together as an array if you post it, instead of stacking below each other into an array and you should be able to initiate them like: foreach($_POST['caches'] as $cache){ //do your stuff...}

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related