www.webdeveloper.com
Results 1 to 3 of 3

Thread: Cloning multiple form elements

  1. #1
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    47

    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

  2. #2
    Join Date
    Apr 2008
    Location
    North Carolina
    Posts
    47
    I hope this was clear for everyone.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by bigalo View Post
    I hope this was clear for everyone.
    Not really, as working with JQuery is never a clear job

    So, you want to clone an element? You may start simply from using the cloneNode(true) DOM method. You don't need JQuery for that.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles