SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add items to input fields

    Hi,

    I have a problem with a form where I'd like to populate input fields when checkboxes are selected.

    It's almost answered for me in http://www.sitepoint.com/forums/showthread.php?t=457892 but I can't work out how to get it to scale for several "input type=text" fields. (The example here works beautifully with a single textarea)

    The HTML code is more or less like this:
    <form>
    <table>
    <tr>
    <td><input type="checkbox" name="first1"> Bill</td>
    <td><input type="checkbox" name="first2"> William</td>
    <td><input type="text" name="firstname"></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="second1"> Smith</td>
    <td><input type="checkbox" name="second2"> Smyth</td>
    <td><input type="text" name="surname"></td>
    </tr>
    <!-- dozens more rows -->
    </table>
    </form>

    What I would like to do is have the ability to select Bill and/or William and for that to populate the first text input and so on.

    Any help would be greatly appreciated.

    Cheers,
    Feltex
    Last edited by feltex; Feb 15, 2007 at 21:04.

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Location
    Amsterdam
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming you'll use the DOM ...
    • You'll need to write an event handler for each check box.
    • You'll need to assign an id to the text fields and check boxes so that you can use the DOM to work with them.


    Here's a link on events: http://www.quirksmode.org/js/introevents.html
    And a link to an intro on the DOM: http://www.quirksmode.org/dom/intro.html

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the pointers DanNL.

  4. #4
    SitePoint Enthusiast csjc2662's Avatar
    Join Date
    Feb 2007
    Location
    Texas, USA
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb An example that might help?

    Here is an example similar to what your asking I think. I didn't comment it very well but I did it in High School while teaching myself... if you just ignore the ads it might help. Its just a little game thing but it is browser compatible with all the ones ive tested it with. Just look at the source. Use anything u need. http://web_master_00.tripod.com/Torrentrpg/battle.html
    James
    New links coming soon....

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the structure of all your TRs is the same...
    - they contain a number of TDs, some of which have checkboxes
    - they contain exactly one textbox

    You can use code like this to get things working (note that for each checkbox I added a value attribute)
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function assignEvts() {
    	var inps = document.getElementById("checkboxtable").getElementsByTagName("input");
    	
    	for (var i=0; i < inps.length; i++) {
    		if (inps[i].type.toLowerCase() == "checkbox") {
    			inps[i].onclick = function () {
    
    				// get a reference to the TR that contains this checkbox
    				var tr = this.parentNode.parentNode;
    				
    				// locate the text box within the TR
    				var inpts = tr.getElementsByTagName("input");
    				for (var j=0; j < inpts.length; j++) {
    					if (inpts[j].type.toLowerCase() == "text") {
    						// found the textbox, set the value to the clicked checkbox's value
    						inpts[j].value = this.value;
    						break;
    					}
    				}
    			}
    		}
    	}
    }
    window.onload = assignEvts;
    </script>
    </head>
    <body>
    <form>
    <table id="checkboxtable">
    <tr>
    <td><input type="checkbox" name="first1" value="Bill"> Bill</td>
    <td><input type="checkbox" name="first2" value="William"> William</td>
    <td><input type="text" name="firstname"></td>
    </tr>
    <tr>
    <td><input type="checkbox" name="second1" value="Smith"> Smith</td>
    <td><input type="checkbox" name="second2" value="Smyth"> Smyth</td>
    <td><input type="text" name="surname"></td>
    </tr>
    <!-- dozens more rows -->
    </table>
    </form>
    </body>
    </html>


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
  •