www.webdeveloper.com
Results 1 to 2 of 2

Thread: javascript replace function

  1. #1
    Join Date
    Sep 2011
    Posts
    2

    Question javascript replace function

    Hi,

    I am having trouble to get small function working. I have created a unsorted listing which can be dynamically extended. In order to identify the added input fields I would like to give them the right names by replacing a string. However after turning un that line of code - the function stops working

    Thats my sample code:
    Code:
    <html>
     <head>
       <title>Clone elements</title>
    	<script language="JavaScript">
    		// Add Level one node
    		function AddNewL1(button, objid)
    		{
    			var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    			//var clone_me = clone_me.replace(/XXX/g, L1_count++);
    			
    			button.parentNode.appendChild(clone_me);
    			
    		}
    		
    		// Add Level two node
    		function AddNewL2(button, objid, L1_Element)
    		{
    			var clone_me = document.getElementById(objid).firstChild.cloneNode(true);
    			//var clone_me = clone_me.replace(/XXX/g, L1_Element); 
    
    			button.parentNode.appendChild(clone_me);
    		}
    		
    		// Remove node 
    		function RemoveThis(obj) {
    			obj.parentNode.parentNode.removeChild(obj.parentNode);
    		}
    		
    		// Global variable to count the current level one elements
    		var L1_count = 2;
    		
         </script>
      </head>
      <body>
      
        <ul>
    		<li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button><button onclick="RemoveThis(this);">-</button>
    			<ul>
    				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '0');">+</button><button onclick="RemoveThis(this);">-</button></li>
    				<li id="1.2">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '0');">+</button><button onclick="RemoveThis(this);">-</button></li>
    			</ul>
    		</li>
    		<li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button><button onclick="RemoveThis(this);">-</button>
    			<ul>
    				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button><button onclick="RemoveThis(this);">-</button></li>
    				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button><button onclick="RemoveThis(this);">-</button></li>
    				<li id="1.1">Level 02  <input type="text" name="l2_1[]" /><button onclick="AddNewL2(this, 'dolly_l2', '1');">+</button><button onclick="RemoveThis(this);">-</button></li>
    			</ul>
    		</li>
    	</ul>
    
    	
    	<!-- element to be used for level one -->
    	<div id="dolly_l1" style="visibility:hidden; display:none"><li class="l1">Level 01: <input type="text" name="l1[]"><button onclick="AddNewL1(this, 'dolly_l1');">+</button><button onclick="RemoveThis(this);">-</button>
    			<ul>
    				<li id="1.1">Level 02  <input type="text" name="l2_XXX[]" /><button onclick="AddNewL2(this, 'dolly_l2', 'XXX');">+</button><button onclick="RemoveThis(this);">-</button></li>
    			</ul>
    		</li>
    	</div>
    	
    	<!-- element to be used for level two -->
    	<div id="dolly_l2" style="visibility:hidden; display:none"><li class="l2">Level 02 <input type="text" name="l2_XXX[]" /><button onclick="AddNewL2(this, 'dolly_l2', 'XXX');">+</button><button onclick="RemoveThis(this);">-</button></li>
    	</div>
    	</body>
    </html>
    I have disabled the replace function in order to show the functionality of the page. Any help would be appreciated.
    Last edited by Kor; 09-13-2011 at 03:54 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Sep 2011
    Posts
    2
    Found a solution myself :-)

    I moved the HTML-code directly into the js-function in order to be able to use the available vars...

    Code:
    function AddNewL2(button, objid, L1_Element)
    		{
    			var newLI = document.createElement("li");
    			newLI.innerHTML = "<input type=\"text\" name=\"l2_"+L1_Element+"[]\" /><button onclick=\"AddNewL2(this, \'dolly_l2\', \'"+L1_Element+"\');\">+</button><button onclick=\"RemoveThis(this);\">-</button>";
    	
    			button.parentNode.parentNode.appendChild(newLI);
    		}

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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