Question

I have a JSFiddle that seems like it should work but it doesn’t.

function copyform(curnum){
    if(curnum == 3) $('p').html('Thank You!')
    var num = $('form').length;
    var newNum  = new Number(num + 1);

    // create the new element via clone(), and manipulate its ID using newNum value
    var newElem = $('#form'+curnum).clone().attr('id', 'form' + newNum);

    //
    //this is where I need to update the onclick to copyform('+newNum+')
    $('#form'+newNum+' input').attr('onclick', 'copyform('+newNum+')');

    // insert the new element after the last "duplicatable" input field
    $('form').after(newElem);

}

I just need help implementing the onclick function. This is part of a larger more complex program that would be a hard example to show. Any and all help is much appreciated!

Answer 1

I transformed your function a bit:

http://jsfiddle.net/yjAeS/3/

function copyform( curnum ){
  var curnum = + $(this).closest('[data-num]').attr('data-num');

    // put the message into current form's <p> only
  if( curnum == 3) $('#form'+curnum+' p').html('Thank You!')

  // let's put the last form into a variable for cloning and appending
  var $lastForm = $('#form'+curnum);

  var newNum = 1 + $('form').length; // number+string => number
  var $newElem = $lastForm.clone().attr({
    'id': 'form'+newNum,
    'data-num': newNum   // store the form number in a custom attribute
  });

  $lastForm.after( $newElem );
}

$(function(){
  // we don't have to attach event manually to each cloned form
  // http://api.jquery.com/on/
  $('body').on('click','form input[type="button"]', copyform );
});
​