SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Updating other fields when this field is changed

    How do use JavaScript to update the values in other fields (textboxes) when a particular one is changed?

    My particular situation is this: I've an unknown number (generated from database records) of rows of member registration information. For each row, I have a textbox where I allow my client to enter the seat number for the user. When the client enters, say 100 for a particular row, how do I update the rows below it (the rows above remain) such that the seat numbers go consecutively 101, 102, 103 and so on?

    To make it hopefully clearer, consider this example:

    Before:
    Code:
    Seat No.     Other fields (not impt.)
    --------     -----------
    34
    35
    36
    37
    38
    After:
    Code:
    Seat No.     Other fields (not impt.)
    --------     -----------
    34
    35
    100   <--- client inputs '100' here  
    101          so the rows after it become 101, 102 
    102
    If I'm not clear, please let me know and I'll try to explain it better.

    Is this possible? Or can you think of a better way to do this?

    Thanks much!

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are these fields named?

    Incrementally? ie: "field_01", "field_02", "field_03", etc.
    Or as an array? ie: "fields[]"
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm now that you mention it, that is a problem too, because the seat number for each row can only be uniquely determined from it's registration id (another field). If I use an array, I can't match back the seat number to the registration id.

    Any suggestions on how to name the fields?

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you show me a portion of the generated form? Or further explain what you are trying to do? Are these seats for an airplane or what?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's actual registrations for an event. Currently, I have it like this:
    Code:
    <input name="seatnumber_636456d1c32e6669" type="text" value="5" size="5" />
    Where the seat number field for a particular row is 'seatnumber_' concatenated with the registration ID.

    Basically the client wants to be able to specify seat numbers for registrants. The seat numbers are initially auto-generated by taking the max. seat no. from the DB and incrementing it (so you have seat nos. going up incrementally as you go down a row)

    Because there could be many registrants, there is a need to automate the updating of the seat numbers of other fields when a particular registrant's seat no. is changed. This is necessary because seat numbers can run from 1-300, and then skip to 500-700, and so on. So the client wants specify the lower limit, and have the seat nos. below auto-number themselves incrementally.

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it what I came up with
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<script type="text/javascript">
    	
    		function setupForm( f )
    		{
    			var elem,
    				elems = new Array(),
    				i = 0;
    			while ( elem = f.elements[i++] )
    			{				
    				if ( elem.name.indexOf( "seatnumber_" ) >= 0 )
    				{
    					elems[elems.length] = elem;
    				}
    			}
    			
    			i = 0;
    			while( elem = elems[i] )
    			{				
    				elem.prevElem = elems[i-1] || null;
    				elem.nextElem = elems[i+1] || null;
    				elem.onchange = function( e )
    				{					
    					var evt = e || event;
    					var val = parseInt( this.value, 10 );
    					if ( this.prevElem != null && val <= parseInt( this.prevElem.value, 10 ) )
    					{						
    						alert( "Must be higher than previous seat!" );
    						this.select();
    						this.focus();
    						evt.returnValue = null;
    					}
    					else if ( this.nextElem != null && val >= parseInt( this.nextElem.value, 10 ) )
    					{
    						var j = val,
    							walkingElem = this.nextElem;
    						while ( walkingElem != null )
    						{
    							walkingElem.value = ++j;
    							walkingElem = walkingElem.nextElem;
    						}
    					}
    				}
    				i++;
    			}
    		}
    	</script>
    </head>
    <body onload="setupForm( document.forms[0] )">
    	<form>
    		Junk <input name="blah0" type="text" value="" size="5" /><br />
    		Seat One <input name="seatnumber_636456d1c32e6669" type="text" value="5" size="5" /><br />
    		Seat Two <input name="seatnumber_636456d1d32e6669" type="text" value="6" size="5" /><br />
    		Junk <input name="blah1" type="text" value="" size="5" /><br />
    		Seat Three <input name="seatnumber_636456d1e32e6669" type="text" value="7" size="5" /><br />
    		Seat Four <input name="seatnumber_636456d1f32e6669" type="text" value="8" size="5" /><br />
    		Junk <input name="blah2" type="text" value="" size="5" /><br />
    		Junk <input name="blah3" type="text" value="" size="5" /><br />
    	</form>	
    </body>
    </html>
    Tested and functional in IE6, Mozilla 1.3.1, and Opera 7 [img]images/smilies/biggrin.gif[/img]
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks Beetle! I owe you one.


Bookmarks

Posting Permissions

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