Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    onChange select box?

    Hi Guys
    How can I change a select list when a user enters a value into a text box? Like with the below form I would like to have the select box change when the user enters a value in the "id" text box that matches a value in the select box. Say the user types "1122" in the text box I would like the select list to change to to show "John". Is this possible?? Please help. Tracy
    <form method="POST" >

    <p><input type="text" name="id" size="20"></p>
    <p><select size="1" name="name">
    <option value="1122">John</option>
    <option value="1133">Fred</option>
    <option value="1144">Joe</option>
    <option selected>Select One</option>
    &nbsp;
    </select></p>

    <p>
    <input type="submit" value="Submit" name="B1"></p>
    </form>
    Last edited by nikko50; 01-19-2006 at 01:06 AM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    HTML:
    Code:
    <form>
    <p><input type="text" name="id" size="20" onkeyup="selectOption(this)" onblur="selectOption(this)"></p>
    <p><select size="1" name="selName">
    <option value="1122">John</option>
    <option value="1133">Fred</option>
    <option value="1144">Joe</option>
    <option value="" selected>Select One</option>
    </select></p>
    </form>
    Javascript:
    Code:
    function selectOption(oTxt){
      var sel = oTxt.form.selName;
      var len = sel.options.length;
      sel.selectedIndex = len - 1; //select 'Select One' option by default
      for (var i=0; i<len; i++){
        if (sel.options[i].value == oTxt.value){
           sel.selectedIndex = i;
           break;
        }
      }
    }

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    You're the best.The script you sent works great but here's what I'm actually trying to do. I need to compare the first six charactors in the text field string. If the first 6 charactors are equal to "1ZR401" then the select list should change to value "01".If the first 6 charactors are equal to "1ZR402" then the select list should change to value "03".
    If the first 6 charactors are equal to "1ZR403" then the select list should change to value "02". Could you help me with that?
    Tracy

    <form>
    <p><input type="text" name="id" size="20" ></p>
    <p><select size="1" name="selName">
    <option value="01">UPS GROUND</option>
    <option value="02">UPS NEXT DAY</option>
    <option value="03">UPS SECOND DAY</option>
    <option value="" selected>Select One</option>
    </select></p>
    </form>

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Why not just use 1ZR401 to 03 as the option values? Do you need those 01-03 values on the server?

  • #5
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Yes. The 01-03 are the carrier id's located in a mysql table. Then I attach the full tracking number the user enters. UPS tracking numbers always start with "1Z9R29A401" or "1Z9R29A402" or "1Z9R29A403" depending on the service level. So actually I need to look at the first 10 charactors. Please help.
    Tracy

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    <form>
    <p><input type="text" name="id" size="20" onkeyup="selectOption(this)"></p>
    <p><select size="1" name="selName">
    <option value="01" id="1Z9R29A401">UPS GROUND</option>
    <option value="02" id="1Z9R29A402">UPS NEXT DAY</option>
    <option value="03" id="1Z9R29A403">UPS SECOND DAY</option>
    <option value="" selected>Select One</option>
    </select></p>
    </form>
    ...
    function selectOption(oTxt){
      var sel = oTxt.form.selName;
      var len = sel.options.length;
      sel.selectedIndex = len - 1; //select 'Select One' option by default
      for (var i=0; i<len; i++){
        if (oTxt.value.indexOf(sel.options[i].id) == 0){
           sel.selectedIndex = i;
           break;
        }
      }
    }


  •  

    Posting Permissions

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