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