#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    8
    Rep Power
    0

    Question Select Boxes to text box


    I am trying to take 3 select boxes and append the selected value of each to a text box with Javascript. Here's the kicker. I want the selected values to appear in the text box in the order that I select them and the order can be completely random. Once a select box is selected from I would like it to be disabled. Any Ideas.

    chainsmoker
  2. #2
  3. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,166
    Rep Power
    2042
    Not really thought this one through yet, but it might work...

    Create an emtpy string,
    Code:
    <script language="JavaScript">
    var SomeString = ""
    </script>
    and put in the following in tags for the select boxes...
    Code:
    <select name="One" onChange="JavaScript:add(One.value);">
         <opti.....>
    </select>
    <select name="Two" onChange="JavaScript:add(Two.value);">
         <opti.....>
    </select>
    <select name="Three" onChange="JavaScript:add(Three.value);">
         <opti.....>
    </select>
    Then have a JavaScript function to append the textbox value to the string...
    Code:
    <script language="JavaScript">
    function add(value)
    {
    SomeString = ""+SomeString+""+value+"";
    }
    </script>
    Then when all the boxes have been selected, use
    Code:
    textboxName.value = SomeString;
    Bit long winded, but should do the trick... Maybe.
    Support requests via PM will be ignored!
    Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    17
    Code:
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    function appendIt(oSelect)
    {
    	var selval = oSelect.options[oSelect.selectedIndex].value;
    	var output = document.getElementById('output');
    	output.count = (typeof output.count == 'undefined') ? 1 : ++output.count;
    	output.value += output.count + ') ' + selval + '\n';
    	oSelect.disabled = true;
    }
    
    function undisable(oForm)
    {
    	var el, i = 0;
    	while (el = oForm.elements[i++])
    		if (typeof el.disabled != 'undefined')
    			el.disabled = false;
    }
    
    </script>
    </head>
    <body onload="document.forms[0].reset()">
    <form onreset="undisable(this)">
    <select name="s1" onchange="if(selectedIndex!=0)return appendIt(this)">
    <option value="">- pick -</option>
    <option value="bla">bla</option>
    <option value="foo">foo</option>
    <option value="hah">hah</option>
    </select>
    <select name="s2" onchange="if(selectedIndex!=0)return appendIt(this)">
    <option value="">- pick -</option>
    <option value="feh">feh</option>
    <option value="boo">boo</option>
    <option value="yuk">yuk</option>
    </select>
    <select name="s3" onchange="if(selectedIndex!=0)return appendIt(this)">
    <option value="">- pick -</option>
    <option value="ugh">ugh</option>
    <option value="mug">mug</option>
    <option value="jug">jug</option>
    </select>
    <br /><br />
    <textarea id="output" style="width:100px;height:54px;overflow:hidden;"></textarea>
    <br /><br />
    <input type="reset">
    </form>
    </body>
    </html>
    Last edited by mrrichardfeder; October 14th, 2003 at 10:50 AM.
  6. #4
  7. Cunning Linguist
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2003
    Location
    I used to live at home, now I stay at the house
    Posts
    10,166
    Rep Power
    2042
    Exactly.
    Support requests via PM will be ignored!
    Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    8
    Rep Power
    0
    Almost perfect. However, is there anyway to make this work in Netscape 4.7 and anyway to reset the disabled boxes with a form reset button click?

    Thanks!
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    17
    Edited the above.

    Don't have Nav 4 here. It doesn't do disabling, although you can simulate it, requiring dynamic 'flipping' of event handlers - all the sort of garbage I refuse to do any more. It's user base is so low these days, I'd advise skipping it, or using a server detect and serving up something simpler for it.

    Have a butt and don't worry about it.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    8
    Rep Power
    0
    Is there a way to make it work with Nav 4 without the disabling?
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    17
    Try changing this:
    Code:
    var output = document.getElementById('output');
    ...to this:
    Code:
    var output = document.forms[0].elements['output'];
    ...and:

    <textarea id="output" name="output".....>
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    8
    Rep Power
    0
    I talked them into forgetting about Nav 4.x.
    Any way to reset the disabling without explicitely listing every form field to be reset. In other words just reset the whole form.
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    17
    OK, edited again. Nice work on the NS4 thing.

    What next?
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Posts
    8
    Rep Power
    0
    Perfect. Thanks for all the help. I have made some changes to make it work a little differently since I have got to get this working in an XSLT file and will post the final code when I get it ironed out.

    Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo