Form option list adding a 2nd option based upon the first.

Discussion in 'Javascript' started by mike.a.rea@gmail.com, Feb 16, 2006.

  1. Guest

    Say that I have a form with a drop down list box. This list will set a
    value for a data field (for lack of a better word) say this is called
    test1.

    This is what I have for my basic form.
    form name="form1" method="post" action="">
    <select name="test1" id="test1">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    <input type="submit" name="Submit" value="Submit">
    </form>

    Now I want to set a second data field call it test2 based upon the
    value assigned to test1 form the list box.

    Can I do this? I figured if I could it would be with javascript, but
    not sure how to do so.
    Thanks for any help.
     
    , Feb 16, 2006
    #1
    1. Advertising

  2. UnaCoder Guest

    Is the second data field another form input?

    you could setup something like this:
    <script>
    function test1_changed() {
    getElementById("test2").value = "Selected " +
    getElementById("test1").value;
    }
    </script>
    < form name="form1" method="post" action="">
    <select id="test1" onchange="test1_changed();">
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    <input type="text" id="test2" value="No Selection">
    <input type="submit" name="Submit" value="Submit">
    </form>

    The value in the text box named test2 will change to say "Selected #"
    # being the value of the item selected in test1.
     
    UnaCoder, Feb 16, 2006
    #2
    1. Advertising

  3. UnaCoder Guest

    that should be document.getElementById by the way =)
     
    UnaCoder, Feb 16, 2006
    #3
  4. Guest

    Ok, but I could have more then 2 options here.

    Also lets say that I want test2 = "Red" if test1=1, test2 = "Blue" if
    test1=2, test2 = "Green" if test1=3, etc....

    so what would you think if I made the function test1_changed()

    if (test1.value == "1") {
    document.getElementById("test2").value ="Red" ;}
    else if (test2.value=="2") { ..........

    Also not that it really matters but the text element for test2 would be
    hidden, it would be used more to pass data off that the user doesnt
    need to see.
     
    , Feb 16, 2006
    #4
  5. UnaCoder Guest

    Yeah of course you can do that. I would probablly use switch-case
    insted of if-then-else-if-then....
     
    UnaCoder, Feb 16, 2006
    #5
  6. mike Guest

    Ok, I got it with your assistance.. Thanks.

    For anyone else who needs this answer, here is what I did and it
    worked.

    <script language="javascript">
    function test1_changed() {
    if (document.getElementById("test1").value == "1") {
    document.getElementById("test2").value ="Red";}
    else {if (document.getElementById("test1").value == "2") {
    document.getElementById("test2").value ="Blue";}
    else {document.getElementById("test2").value ="Green";}}
    }
    </script>
    </head>

    <body>
    <form name="form1" method="post" action="">
    <select id="test1" onchange="test1_changed();">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <input type="text" id="test2" >
    <input type="submit" name="Submit" value="Submit">
    </form>

    </body>
    </html>
     
    mike, Feb 16, 2006
    #6
  7. UnaCoder Guest

    That would look a lot less messy if you use switch:

    function test1_changed() {
    var idTest1 = document.getElementById("test2");

    switch (document.getElementById("test1").value) {
    case 1:
    idTest1.value = "Red";
    break;
    case 2:
    idTest1.value = "Blue";
    break;
    default:
    idTest1.value = "Green";
    }
    }
     
    UnaCoder, Feb 16, 2006
    #7
  8. RobG Guest

    UnaCoder wrote:
    > That would look a lot less messy if you use switch:
    >
    > function test1_changed() {
    > var idTest1 = document.getElementById("test2");
    >
    > switch (document.getElementById("test1").value) {
    > case 1:
    > idTest1.value = "Red";
    > break;
    > case 2:
    > idTest1.value = "Blue";
    > break;
    > default:
    > idTest1.value = "Green";
    > }
    > }
    >


    A bit confusing to hold a reference to 'test2' to a variable called
    'idTest1', but maybe that's just me... :)

    Try:

    function test1_changed() {
    var mapAr = { 1:'Red', 2:'Blue', 3:'Green'};
    var a = document.getElementById("test1");
    var b = document.getElementById("test2");
    if ( a && b && (a.value && a.value in mapAr) ){
    b.value = mapAr[a.value];
    }
    }




    --
    Rob
     
    RobG, Feb 17, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vinay
    Replies:
    2
    Views:
    1,021
    Vinay
    Aug 18, 2005
  2. southof40
    Replies:
    12
    Views:
    763
    southof40
    Jun 21, 2010
  3. Cameron Simpson
    Replies:
    3
    Views:
    226
    southof40
    Jun 21, 2010
  4. Micromanaged

    Form change based upon criteria selected?

    Micromanaged, Jul 2, 2004, in forum: ASP General
    Replies:
    3
    Views:
    126
    Bullschmidt
    Jul 5, 2004
  5. SA SA
    Replies:
    5
    Views:
    2,495
    Ray Costanzo [MVP]
    Oct 19, 2006
Loading...

Share This Page