Jquery Form field duplication

Question

Hi there, I am new to jquery and consider myself a very novice coder at best, so please bare with me. But I think I am in need of your help!

I have quite a long complicated php form, and a requirement to duplicate a set of fields. I am sure there must be a more efficient way of coding it, however I can't figure it out. There are 2 examples (of over 15) below where the only things that change are the IDs i.e. #PN etc. Is there possibly a way to loop through the fields?

$(document).ready(function(){
      $("#PN1").click(function(){
      if ($("#PN1").is(':checked')) {
             // Checked, copy values  
             $("#PNevent1").val($("#PNevent0").val());  
             $("#PNroom1").val($("#PNroom0").val());  
             $("textarea#PNdescription1").val($("textarea#PNdescription0").val());  
             $("select#PNmenu1").val($("select#PNmenu0").val());  
             $("#PNdate1").val($("#PNdate0").val());  
             $("#PNtimestart1").val($("#PNtimestart0").val());  
             $("#PNtimeend1").val($("#PNtimeend0").val());  

} else {
// Clear on uncheck
             $("#PNevent1,#PNroom1,textarea#PNdescription1,select#PNmenu1,#PNdate1,#PNtimestart1,#PNtimeend1").val(""); 
      }
      });

$("#PN2").click(function(){
      if ($("#PN2").is(':checked')) {
             // Checked, copy values  
             $("#PNevent2").val($("#PNevent1").val());  
             $("#PNroom2").val($("#PNroom1").val());  
             $("textarea#PNdescription2").val($("textarea#PNdescription1").val());  
             $("select#PNmenu2").val($("select#PNmenu1").val());  
             $("#PNdate2").val($("#PNdate1").val());  
             $("#PNtimestart2").val($("#PNtimestart1").val());  
             $("#PNtimeend2").val($("#PNtimeend1").val());  

} else {
      // Clear on uncheck
             $("#PNevent2,#PNroom2,textarea#PNdescription2,select#PNmenu2,#PNdate2,#PNtimestart2,#PNtimeend2").val(""); 
      }
      });


});

Answer 1

use the pseudo selector :first to ensure that the selectors arn't being duplicated

Answer 2

Since the selectors are just strings, you could do something like:

for(var i = 1; i < 15; i++) {

     $("#PN" + i).click(function(){
         if ($("#PN" + i).is(':checked')) {
              // Checked, copy values  
              $("#PNevent" + i).val($("#PNevent + (i-1)").val());  
              $("#PNroom" + i).val($("#PNroom + (i-1)").val());  
              $("textarea#PNdescription" + i).val($("textarea#PNdescription" + (i-1)).val());  
              $("select#PNmenu" + i).val($("select#PNmenu" + (i-1)).val());  
              $("#PNdate" + i).val($("#PNdate" + (i-1)).val());  
              $("#PNtimestart" + i).val($("#PNtimestart" + (i-1)).val());  
              $("#PNtimeend" + i).val($("#PNtimeend" + (i-1)).val());  
         }
     }); 
}

not sure if this syntax will work exactly, but the idea should.

Answer 3

Hi. Thanks Getimoliver for your response that looked good initially, however maybe I didn't explain myself quite right, which I apologise.

However there are 5 IDs in total: #PN, #DPN, #PPN, #L&D, #SLWS. Each repeated 3 times: 0, 1 and 2. Each of these have: event, room, description, menu, date, timestart and timeend.

The 'for' part looks right, however would I be right in thinking that maybe adding an if statement at the beginning? i.e. identifying either #PN, #DPN etc would work?

Answer 4

ok I wonder if I was going down the wrong route to solve this. Could this be an option that might work using jquery .each ?

my html form, has a checkbox:

when this checkbox is ticked. I wish to duplicate the 7 fields as stated before, in this case from #PN-1 to #PN-2, on the html form there are 15 different ids.

duplicating from a input such as: into a input of:

$(document).ready(function(){

$(".duplicate").click(function(){

var id = $(this).attr("id");
var namecode = id.split("-"));
// Create our test array.
var arrValues = [ "event", "room", "description","menu","date","timestart","timeend" ];          
if ($(id).is(':checked')) {
jQuery.each(arrValues, function() {
$("#" + namecode + arrValues + 1).val($("#" + namecode + arrValues + 1-1).val());  
});
} else {  
jQuery.each(arrValues, function() {
$("#" + namecode + arrValues + 1).val("");  
});
});

}); });

Answer 5

you can also refer to this site on how to dulplicate fields with jQuery plugin with just a few line of codes.. as easy as 1 2 3...

http://www.ryscript.co.cc/jQuery/jQuery-duplicate-fields-form-submit-with-php/

thanks