www.webdeveloper.com
Results 1 to 6 of 6

Thread: help needed to simplify

  1. #1
    Join Date
    Mar 2012
    Posts
    41

    help needed to simplify

    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

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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)"

  3. #3
    Join Date
    Mar 2012
    Posts
    41
    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

  4. #4
    Join Date
    Mar 2012
    Posts
    41
    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
    Last edited by blak422; 04-13-2012 at 05:12 PM.

  5. #5
    Join Date
    Mar 2012
    Posts
    41
    LOL eval("count"+k+"+=1"); works

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    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
    Last edited by Padonak; 04-14-2012 at 06:03 PM.

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