Results 1 to 1 of 1

Thread: Cloning multiple form elements.

  1. #1
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Cloning multiple form elements.

    Hello,

    I'm in need of some help. I have a form that I want to clone and add up to 5 duplicates with slight changes. The changes are:

    • Add a second question and another set of related radio buttons for only the duplicates.
    • Change the title in the Header to increment by 1 ex. Header 1, Header 2...


    I also would like to make the form elements "id" and "names" unique. Also, continue to use the add and remove button at the bottom. I hope this is doable. Any help will be appreciated.

    I have included my existing code.

    NOTE: for a visual, I mocked up the the original form and 1 copy of the fields in the html, not to be used.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    </head>
    <body>
    <script type="text/javascript"> 
    	$(document).ready(function() {
    		$('#btnAdd').click(function() {
    			var num		= $('.clonedInput').length;	// how many "duplicatable" input fields we currently have
    			var newNum	= new Number(num + 1);		// the numeric ID of the new input field being added
    			var newElem = $('#section' + num).clone().attr('id', 'section' + newNum);
     
    			newElem.children(':first').attr('id', 'first' + newNum).attr('name', 'first' + newNum).val('');
    			newElem.children(':first').attr('id', 'last' + newNum).attr('name', 'last' + newNum).val('');
    			newElem.children(':first').attr('id', 'phone' + newNum).attr('name', 'phone' + newNum).val('');
    			newElem.children(':first').attr('id', 'email' + newNum).attr('name', 'email' + newNum).val('');
    			newElem.children(':first').attr('id', 'yes' + newNum).attr('name', 'yes' + newNum).val('');
    			newElem.children(':first').attr('id', 'no' + newNum).attr('name', 'no' + newNum).val('');
    			
    			$('#section' + num).after(newElem);
    			$('#btnDel').attr('disabled','');
    			if (newNum == 5)
    				$('#btnAdd').attr('disabled','disabled');
    		});
     
    		$('#btnDel').click(function() {
    			var num	= $('.clonedInput').length;	// how many "duplicatable" input fields we currently have
    			$('#section' + num).remove();		// remove the last element
    			$('#btnAdd').attr('disabled','');	// enable the "add" button
     
    			// if only one element remains, disable the "remove" button
    			if (num-1 == 1)
    				$('#btnDel').attr('disabled','disabled');
    		});
     
    		$('#btnDel').attr('disabled','disabled');
    	});
    </script>
    <form id="myForm">
      <div id="section1" style="margin-bottom:4px; border-bottom:1px solid #000; width: 400px;" class="clonedInput"> <br>
        <br>
        <div style=" font-weight:bold; border: 1px solid #000; padding:4px;background:#CCC; font-size:18px; margin-bottom:5px;">Header</div>
        First:
        <input type="text" name="first1" id="first1" />
        <br>
        <br>
        Last:
        <input type="text" name="last1" id="last1" />
        <br>
        <br>
        <br />
        <div style=" font-weight:bold;padding:4px;">Header 2</div>
        <div>Show this question and radios on load of page.</div>
        <div>
          <input type="radio" id="yes1" class="eRad" name="yes1" value="" />
          <label class="" for="yes">Yes</label>
          <input type="radio" id="no1" class="eRad" name="no1" value="" />
          <label class="" for="no">No</label>
        </div>
        Phone:
        <input type="text" name="phone1" id="phone1" />
        <br>
        <br>
        Email:
        <input type="text" name="email1" id="email1" />
      </div>
      <div id="section1" style="margin-bottom:4px; border-bottom:1px solid #000; width: 400px;" class="clonedInput"> <br>
        <br>
        <div style=" font-weight:bold; border: 1px solid #000; padding:4px;background:#CCC; font-size:18px; margin-bottom:5px;">Header 2 (increment this number)</div>
        <div>Show this new question and radios on all copies</div>
        <div>
          <input type="radio" id="yes_a2" class="eRad" name="yes_a2" value="" />
          <label class="" for="yes">Yes</label>
          <input type="radio" id="no_a2" class="eRad" name="no_a2" value="" />
          <label class="" for="no">No</label>
        </div>
        First:
        <input type="text" name="first2" id="first2" />
        <br>
        <br>
        Last:
        <input type="text" name="last2" id="last2" />
        <br>
        <br>
        <br />
        <div style=" font-weight:bold;padding:4px;">Sub Header 2 (increment this number)</div>
        <div>Show this question and radios on load of page.</div>
        <div>
          <input type="radio" id="yes_a2" class="eRad" name="yes_a2" value="" />
          <label class="" for="yes">Yes</label>
          <input type="radio" id="no_a2" class="eRad" name="no_a2" value="" />
          <label class="" for="no">No</label>
        </div>
        Phone:
        <input type="text" name="phone2" id="phone2" />
        <br>
        <br>
        Email:
        <input type="text" name="email2" id="email2" />
      </div>
      <div style="margin-top:10px;">
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
      </div>
    </form>
    </body>
    </html>

    -Cheers
    Last edited by bigalo; 02-07-2011 at 01:26 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •