help needed to simplify

**blak422** · 04-13-2012 02:34 PM

I have this code with some inputs that the user has to have the ability to add more if needed at the same time each input needs to be unique since im sending these values to a php for db input.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
var count1 = count2 = count3 = 1;
function AddInput(id) {
	var newSerial = document.createElement('input');
	var newComment = document.createElement('input');
	var newBreak = document.createElement('br')
			
	newSerial.type = "text";
	newComment.type = "text";
		
	switch(id)
	{
		case "1serial":
		{
			var parent = document.getElementById("1serial");
			newSerial.id = "serial_1_"+count1;
			newComment.id = "comm_1_"+count1++;		
			break;
		}
		case "2serial":
		{
			var parent = document.getElementById("2serial");
			newSerial.id = "serial_2_"+count2;
			newComment.id = "comm_2_"+count2++;
			break;
		}
		case "3serial":
		{
			var parent = document.getElementById("3serial");
			newSerial.id = "serial_3_"+count3;
			newComment.id = "comm_3_"+count3++;
			break;
		}
	}
	parent.appendChild(newSerial);
	parent.appendChild(newComment);
	parent.appendChild(newBreak);
}
</script>
</head>
<body>
	<form name="separator">
		<div id="wrapper2">
			<strong>1502 Pipe 1' Joints</strong><br/>
			<div id="1serial">
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_1_0"/><input type="text" id="comm_1_0"/><br/>
			</div>
			<input type="button" value="Add Pipe" onclick="addSerial('1serial')"><br/>
			
			<div id="2serial">
				<strong>1502 Pipe 2' Joints</strong><br/>
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_2_0"/><input type="text" id="comm_2_0"/><br/>
			</div>
			<input type="button" value="Add Pipe" onclick="addSerial('2serial')"><br/>
			
			
			<div id="3serial">
				<strong>1502 Pipe 3' Joints</strong><br/>
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_3_0"/><input type="text" id="comm_3_0"/><br/>
			</div>
		</div>
	</form>
</body>
</html>

this just a sample of the actual file. i would like to simplify that AddInput()

thanks

**holyhttp** · 04-13-2012 03:01 PM

I see a pattern in your JS function.
The only difference between the various "cases" is a number (e.g. 1, 2, 3). Why not use that integer as the input parameter.

For stater:

function AddInput(k) {
var newSerial = document.createElement('input');
var newComment = document.createElement('input');
var newBreak = document.createElement('br')

newSerial.type = "text";
newComment.type = "text";

var parent = document.getElementById(k+"serial");
newSerial.id = "serial_'+k+'_"+count'+k;
k++;
newComment.id = "comm_'+k+'_"+count'+k;
break;

parent.appendChild(newSerial);
parent.appendChild(newComment);
parent.appendChild(newBreak);
}

So instead of an event handler: onclick="addSerial('1serial') you would have onclick="addSerial(1)"

**blak422** · 04-13-2012 03:23 PM

man i did not see that! great... this will help me a lot. I have 29 of this inputs that I have to read to the DB and write from the DB. Thanks

**blak422** · 04-13-2012 04:08 PM

well theres syntax errors but Im trying to use eval() to change the global value of counter"k" but no luck so far. The thing is k will never change:

newComment.id = "comm_"+k+"_"+eval("count"+k);
k++;

will always be comm_1_1 So, getting that last one to increment I need to increment the global value of counter"k" trying this

eval("count"+k+"+=1");

just doesnt work

**blak422** · 04-13-2012 04:18 PM

LOL eval("count"+k+"+=1"); works

**Padonak** · 04-14-2012 04:59 PM

and one else with JQ ))

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function add_input(){
var i=1;
$('div[id*=serial]').each(function(i){
var n=$(this).find('input[class=newserial]').length;
$(this).append('<input type="text" class="newserial" id="serial_'+(n+1)+'_'+(i+1)+'" value="serial_'+(n+1)+'_'+(i+1)+'" /><input type="text" id="comm_'+(n+1)+'_'+(i+1)+'" value="comm_'+(n+1)+'_'+(i+1)+'" /><br />');
});
}

</script>
</head>
<body>
	<form name="separator">
		<div id="wrapper2">
			<strong>1502 Pipe 1' Joints</strong><br />
			<div id="1serial">
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_1_0" /><input type="text" id="comm_1_0" /><br />
			</div>
			<input type="button" value="Add Pipe" onclick="addSerial('1serial')"><br />
			
			<div id="2serial">
				<strong>1502 Pipe 2' Joints</strong><br/>
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_2_0" /><input type="text" id="comm_2_0" /><br />
			</div>
			<input type="button" value="Add Pipe" onclick="addSerial('2serial')"><br />
			
			
			<div id="3serial">
				<strong>1502 Pipe 3' Joints</strong><br/>
				Serial:	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						&nbsp;&nbsp;&nbsp;&nbsp;
						Comment:<br/>
				<input type="text" id="serial_3_0" /><input type="text" id="comm_3_0" /><br />
			</div>
		</div>
	</form>
	<br /><br />
	<a href="#null" onclick="add_input()">add_input</a>

</body>
</html>

remove value="serial_'+(n+1)+'_'+(i+1)+'" and value="comm_'+(n+1)+'_'+(i+1)+'" from the code it is just for test

Thread: help needed to simplify

Thread Tools

Display

help needed to simplify

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions