Question

I have some code to clone the input field directly preceding the clone ‘button’ renaming the id and name of the field as it goes (shown below): –

$(".clone").live('click', function () {
var doppleganger = $(this).prev(); // Neater referencing.
    $(doppleganger).clone().insertAfter(doppleganger);

$(this).prev().attr("id", "input" + increment).attr("name", "input" + increment);

    increment++;

return false;

});

.
The form (#adv_magic) data is loaded on the fly with the jquery ajax event and submitted thusly: –

$("#adv_magic").live('submit', function() {

$("#editor_button, #date_select, #search").hide();
$(".loader").show();

$.ajax({
    type: "POST",
    url: "./scripts/aquire_template.php",
    data: $("#adv_magic").serialize(),
    success: function(html){
        $("#right_container").empty();
        $(".loader").fadeOut(350);
            $("#right_container").html(html);
    }
});
return false;

});

However my cloned input fields are not being processed when the form is posted to my script. I’ve seen a few tutorials about creating the input fields as an array but i’d rather not mess around with that at this stage if there is anything else I can do.

I’m wondering also if it’s to with the way I am serializing the form? I can’t post the full code or a link on this occasion unfortunately as the application is not available from the web. Any thoughts on this would be really appreciated! I’m stumped!

Update Sat 10th 20:31 GMT >
I got the following report from the console > post tab in firebug: –

input1  meeting
input2  select date
input3  enter text
input5  NUMBER MISSING
input6  enter text
input7  test
switch  1

Source
input1=meeting&input2=select+date&input3=enter+text&input6=enter+text&input7=test&input5=NUMBER+MISSING&switch=1

Inputs 5/6/7 are cloned elements so presumably they are being passed to the script?

Update Sat 10th 21:06 GMT >
Echoing the string variable before it is being processed by the script shows non of the cloned input fields.

Answer 1

This one worked for me.

<form id="myForm">
    <fieldset>
        <input type="text" id="input1" name="input1"/><input type="button" value="clone" class="clone"/>
    </fieldset>
    <input type="submit" value="submit" id="sbmt"/>
</form>


$(".clone").live("click", function(e) {
    var count = $("#myForm fieldset").length + 1;
    $(this).parent().clone().insertBefore("#sbmt").find("input[type=text]").attr({
        "id": "input" + count,
        "name": "input" + count
    }).val("");
});


$("#myForm").submit(

function(e) {
    e = e || window.event;
    e.preventDefault();

    $.ajax({
        type: "GET",
        url: "/",
        data: $("#myForm").serialize(),
        success:function(data){
        }
    });
    return false;

});

demo: http://jsfiddle.net/wFzx5/2/