javascript replace function

**nordpol** · 09-13-2011 02:48 AM

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.

**nordpol** · 09-14-2011 06:12 AM

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: javascript replace function

Thread Tools

Display

javascript replace function

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions