Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form elements cloning

    Hi!

    I've been trying to set up a form elements cloning script based on the article in the following link : http://www.quirksmode.org/dom/domform.html.

    The problem seems to be the quirky functioning of the script since I can't get it to work properly in Firefox or IE7. In both cases i can only remove form elements.

    Any suggestion?

    The script:


    Code:
    var counter = 0;
    
    function init() {
    	document.getElementById('moreFields').onclick = moreFields;
    	moreFields();
    }
    
    function moreFields() {
    	counter++;
    	var newFields = document.getElementById('readroot').cloneNode(true);
    	newFields.id = '';
    	newFields.style.display = 'block';
    	var newField = newFields.childNodes;
    	for (var i=0;i<newField.length;i++) {
    		var theName = newField[i].name
    		if (theName)
    			newField[i].name = theName + counter;
    	}
    	var insertHere = document.getElementById('writeroot');
    	insertHere.parentNode.insertBefore(newFields,insertHere);
    }
    window.onload = moreFields;
    HTML:
    Code:
    <div id="readroot" style="display: none">
    	<input type="button" value="Remove review"
    		onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
    		<br />
    		<br />
    
    	<input name="cd" value="title" />
    
    	<select name="rankingsel">
    		<option>Rating</option>
    		<option value="excellent">Excellent</option>
    		<option value="good">Good</option>
    		<option value="ok">OK</option>
    		<option value="poor">Poor</option>
    		<option value="bad">Bad</option>
    	</select>
    	<br />
    	<br />
    
    	<textarea rows="5" cols="20" name="review">Short review</textarea>
    	
    </div>
    
    <form method="post" action="process_form.html.php">
    
    	<span id="writeroot"></span>
    
    	<input type="button" id="moreFields" value="Give me more fields!" />
    	<input type="submit" value="Send form" />
    
    </form>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    1. i don't any node creation happening here.
    2. the button has no childNodes, it's a singleton.

    if you want more buttons, try something like this:
    Code:
    function newElm(type, lab){ return document.createElement(type); }
    	var insertHere = document.getElementById('writeroot');
    	var newFields = document.getElementById('readroot');
    	
    var baseName=newFields.name;
    for(i=0;i<10;i++){
    tElm=newElm("button");
    tElm.style.display = 'block';
    tElm.name=baseName+i;		
    insertHere.appendChild(tElm);
    }//next


  •  

    Posting Permissions

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