Results 1 to 2 of 2

Thread: HELP! Multiple form selected option values shows div with corresponding id. HELP!

  1. #1
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation HELP! Multiple form selected option values shows div with corresponding id. HELP!

    Hello,
    Im really new at coding and I was hoping I could get some help. I am running an online store (oscommerce) and I want to be able to have the user select Color and Style from two differect form select lists, have the values concatenate or append to each other and use that result to show a div with the same id.

    I have created a sample.

    Code:
    <html>
    <body>
    <head>
    <style>
    .hide
    {
       display: none;
    }
    .show
    {
       display: block;
    }
    </style>
    <script type="text/javascript">
    var currentform="";
    function doForm(form)
    {
    
       if (currentform!="")
       {
          var fm = document.getElementById(currentform);
          if (typeof(fm) != undefined)
          {
             fm.className="hide";
          }
       }
    
    
       var itm = form.select1name[form.select1name.selectedIndex].value;
       currentform=itm;
    
       if (itm!="")
       {
          fm = document.getElementById(itm);
    
          if (typeof(fm) != undefined)
          {
             fm.className="show";
          }
       }
    
    
    
    }
    </script>
    
    <script type="text/javascript">
    var currentform="";
    function doForms(form)
    {
    
       if (currentform!="")
       {
          var fm = document.getElementById(currentform);
          if (typeof(fm) != undefined)
          {
             fm.className="hide";
          }
       }
    
    
       var itm = form.select2name[form.select2name.selectedIndex].value;
       currentform=itm;
    
       if (itm!="")
       {
          fm = document.getElementById(itm);
    
          if (typeof(fm) != undefined)
          {
             fm.className="show";
          }
       }
    
    
    
    }
    </script>
    </head>
    <body>
    <SCRIPT LANGUAGE="JavaScript"><!--
    function cycle() {
        var answer = '';
        for (var i = 0; i<document.formName.elements.length; i++) {
            if ((document.formName.elements[i].name.indexOf('select') > -1)) {
                if (document.formName.elements[i].selectedIndex != 0) {
                    answer += document.formName.elements[i].options[document.formName.elements[i].selectedIndex].value + '';
                }
            }
        }
        document.formName.answer.value = answer;
    }
    //--></SCRIPT>
    
    <SCRIPT LANGUAGE="JavaScript1.1"><!--
    function cycle() {
        var answer = '';
        for (var i = 0; i<document.formName.elements.length; i++) {
            if ((document.formName.elements[i].type == 'select-one')) {
                if (document.formName.elements[i].selectedIndex != 0) {
                    answer += document.formName.elements[i].options[document.formName.elements[i].selectedIndex].value + '';
                }
            }
        }
        document.formName.answer.value = answer;
    }
    //--></SCRIPT>
    <FORM NAME="formName">
    
    <SELECT NAME="select1name" onChange="doForm(this.form)">
    <OPTION value="" selected>Pick One</option>
    <OPTION value="">----------</option>
    <OPTION value="01">01</option>
    <OPTION value="02">02</option>
    <OPTION value="03">03</option>
    <OPTION value="04">04</option>
    </SELECT>
    
    <SELECT NAME="select2name" onChange="cycle();doForms(this.form)">
    <OPTION value="" selected>Pick Another</option>
    <OPTION value="">----------</option>
    <OPTION value="10">10</option>
    <OPTION value="20">20</option>
    <OPTION value="30">30</option>
    <OPTION value="40">40</option>
    </SELECT>
    <BR>
    
    <INPUT TYPE="text" NAME="answer" value="0110" onChange="doForm(this.form)">
    </FORM>
    <br><hr><br>
    <div id="10" class="hide">10</div>
    <div id="20" class="hide">20</div>
    <div id="30" class="hide">30</div>
    <div id="40" class="hide">40</div>
    <div id="01" class="hide">01</div>
    <div id="02" class="hide">02</div>
    <div id="03" class="hide">03</div>
    <div id="04" class="hide">04</div>
    <div id="0110" class="hide">hooray!</div>
    <br><hr><br>
    <body>
    <html>

    the resulting string from both options appear in the text box however I want to be able to use that string for an onchange action or something to show the div with the same ID. however I would like it so that it shows the div of only one option until both options are selected.
    when user selects option 01 only div 01 shows, then when user also selects option 10 it shows div 0110. but also if user selects 10 only div 10 shows but only after selecting a second option 01 does div 0110 show
    Last edited by Seraphim; 08-30-2005 at 04:41 PM.

  2. #2
    Join Date
    Aug 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    bump!

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
  •