SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SELECT onChange auto fill other SELECT boxes

    I searched here and some other places on the net but cant find anything that suits my needs.

    I have a SELECT box with 3 values
    Code:
    <form name="form1">
    <select name="length">
    	<option name="length" value="none">--Select for All--</option>
    	<option name="length" value="5">--5 Days--</option>
    	<option name="length" value="7">--7 Days--</option>
    	<option name="length" value="10">--10 Days--</option>
    </select>
    </form>
    OnChange, I want to invoke a function that auto populates the rest of the SELECT fields in the form. The select boxes will vary in quantity as the page is dynamic, but the values are always the same (like the code above).

    Does this make sense?

    The closest example I can find is this (with checkboxes)
    http://www.js-examples.com/example/?ex=464&mode=2

    Much TIA

  2. #2
    SitePoint Evangelist compwizard's Avatar
    Join Date
    May 2002
    Location
    United States
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you mean you want to select all of the options when they click the 'all'?? You need to set some property to allow multiple ones to be selected i believe, unless i misundertood you.
    Compwizard
    "There are 10 kinds of people in this world -- those who know binary, and those who don't."

  3. #3
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's say I select '7 Days' from the SELECT menu. I want the rest of the SELECT boxes in the form to be populated with '7 Days'.

    Only one can be selected at a time.

  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)
    Uh..don't you need that to be a multiple-enabled select?
    Code:
    <select name="length" onChange="" multiple>
    ...options...
    </select>
    also, it isn't necessary to name all the options, and if you do you should name them all the same thing.

    the number of events that work effectively on selects are few, and way fewer for options, so unless you want to add events to each option, you won't get a whole lot fancier than this. Assuming what I've said above is what you are after, try something like this. Remember, the options of a select object are an array! (just like the checkboxes)
    Code:
    <script language="javascript">
    
    function checkForAll(selObj)
    	{
    	if (selObj.options[0].selected)
    		{
    		for (var i=1; i<selObj.length; i++)
    			selObj.options[i].selected = true;
    		}
    	}
    
    
    </script>
    
    <select name="length" onChange="checkForAll(this);" multiple height="4">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    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
    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)
    Sorry, looks like I misunderstood you. So you have multiple selects in the same form, and you want the status of one to affect all the others?

    And how is the page dynamic? PHP or ASP or something?
    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




  6. #6
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Somehow...miraculously...i did it!
    Code:
    function lengthfill(){
    var lengthField = StageForm.Slength.options[StageForm.Slength.selectedIndex].value;
    
    	for (i = 0; i < StageForm.Slength2.length; i++) {
    		StageForm.Slength2[i].value = lengthField;
    		}
    
    return true;
    }
    Code:
    <form name="StageForm">
    <select name="Slength" onChange="lengthfill();">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    .
    .
    .
    <select name="Slength2">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    .
    .
    .
    <select name="Slength2">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    
    
    </form>

  7. #7
    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)
    That's an ok solution but it has two problems

    1) You are hardcoding the DOM names of the FORM and the SELECT into the function. Makes it hard to reuse and/or more editing if anything ever changes.

    2) You have two SELECTs in the form with the same DOM name. This is a big no no, and will probably crash most browsers, besides making it impossible to identify just one of them via any DOM structure out there.

    Better use something like this:
    Code:
    <script language="javascript">
    
    function setAllSelects(frm, newIndex)
    	{
    	for (var i=0; i<frm.elements.length.length; i++)
    		if (frm.elements[i].tagName == 'SELECT')
    			frm.elements[i].selectedIndex = newIndex;
    	}
    </script>
    
    <form name="form1">
    <select name="length" onChange="setAllSelects(this.form, this.selectedIndex);">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    <select name="length2">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    <select name="length3">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    </form>
    Last edited by beetle; Jul 25, 2002 at 12:44.
    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




  8. #8
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Serious lack of dynamic population here.

    what's going on

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  9. #9
    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)
    Ohhh, I see what you are doing....but I'm not sure why you would want all the values of a select to be the same. Doesn't that defeat the purpose of having a select?

    Correct me if I'm wrong, but you want the runtime data of the selects to look like this (assuming 7 days has been selected)
    Code:
    <select name="length">
    	<option value="none">--Select for All--</option>
    	<option value="5">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="10">--10 Days--</option>
    </select>
    <select name="length2">
    	<option value="7">--Select for All--</option>
    	<option value="7">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="7">--10 Days--</option>
    </select>
    <select name="length3">
    	<option value="7">--Select for All--</option>
    	<option value="7">--5 Days--</option>
    	<option value="7">--7 Days--</option>
    	<option value="7">--10 Days--</option>
    </select>
    At least, that's what your function looks like its doing....

    You still shouldn't hardcode the FORM/SELECT data into the function, and NEVER give two objects the same DOM name...

    Let me know what's up...I feel confused now...
    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




  10. #10
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using this form for a mass data upload to our eBay database. The user is going to fill out the forms and for simplicity's sake, I wanted to make a checkbox or Select where he could select all values on that page to be the same. That should save him several minutes alone.

    As for the DOM naming, I thought about that ... I needed an easy way to count the number of boxes checked. So I am using ASP like so

    [vbs] intItemCount = Request.Form("sku").Count [/vbs]
    and looping through the selectde items like this:
    [vbs]
    for x = 1 to intItemCount

    strSKU = Request.Form("sku")(x)

    if strSKU <> "" then
    'get variables
    varName = Request.Form("variable")(x)

    update database
    end if

    next
    [/vbs]

    check out my page here for the example

    http://www.penniesonthedollar.com/store/ebay/stage.asp


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
  •