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

Dev Articles Community Forums Sponsor:

Stay one step ahead of the competition. Evaluate and give feedback on some of the hottest web development tools on the market today. Make your opinion heard! Click Here

August 30th, 2005, 11:46 AM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

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

August 30th, 2005, 07:18 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

bump!

August 31st, 2005, 05:53 AM

MichaelSoft

Contributing User

Join Date: Aug 2005

Location: The Netherlands

Posts: 121

Time spent in forums: 17 h 20 sec
Reputation Power: 3

I have not tested it in a browser, but I guess this will do (almost) what you want. At least it will get you started

Code:

<html>
<body>
<head>
<style>
.hide
{
   display: none;
}
.show
{
   display: block;
}
</style>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--

var prevDiv='';

function changeSel()
{
  // Get the input elements
  sel1 = document.getElementByID('select1name');
  sel2 = document.getElementByID('select2name');
  if(sel1 && sel2)
  {
    // Concatinate the two values
    divname = sel1.value + sel2.value;

    // Update the anser element
    el = document.getElementByID('answer');
    if(el)
    {
      el.value = divname;
    }

    // Was there a selection
    if(divname > '')
    {
      // Was there a previous div shown?
      el = document.getElementByID(prevDiv);
      if(el)
      {
        // Then hide this previous div
        el.class = 'hide';
      }
      
      // Get the new div
      el = document.getElementByID(divname);
      if(el)
      {
        // Show it, and remember for next selection
        el.class='show';
        prevDiv = divname;
      }
    }
  }
}

//--></SCRIPT>

<SELECT id="select1name" NAME="select1name" onChange="changeSel">
<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 id="select2name" NAME="select2name" onChange="changeSel">
<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" id="answer" NAME="answer">


<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>

Just don't forget the "id=" in the fields. This is needed for the getElementById(). And by using this function it will work for most browsers!

August 31st, 2005, 08:12 AM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

download div only on request

how could you have the browser download a div only when it is requested as to decrease load time of the page?

August 31st, 2005, 09:59 AM

MichaelSoft

Contributing User

Join Date: Aug 2005

Location: The Netherlands

Posts: 121

Time spent in forums: 17 h 20 sec
Reputation Power: 3

Now you are talking PHP script (or another server-side scripting language) ... a whole different story then your original question. Maybe you should start a new thread for this?

September 25th, 2005, 05:15 PM

Seraphim

Registered User

Join Date: Aug 2005

Posts: 16

Time spent in forums: 1 h 37 m 6 sec
Reputation Power: 0

Hide default div?

If I have a div diplayed by default (without class="hide") how can I hide it after a selection has been made?

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: