Dynamic text from 3 (Javascript) dropdown SELECT BOX selections

Hello all,
Newbie here (be gentle).

I have an HTML form that contains 3 (Javascript) dropdown SELECT BOXES (See Code Below).

Depending on what item is selected in dropdown SELECT BOX 1, a list of items become available
for selection in dropdown SELECT BOX 2; then depending on what item is selected in dropdown SELECT BOX 2, a list of items become available for selection in dropdown SELECT BOX 3. (Works fine)

PROBLEM: I want to be able to capture, dynamically - in text format, all of the items selected from all 3 (Javascript) dropdown SELECT BOXES after the final selection for dropdown SELECT BOX 3 is completed.

I found a solution on Experts Exchange (details below) that works perfectly for a single dropdown SELECT BOX, but I can't get it to work for my form with 3 (Javascript) dropdown SELECT BOXES.

(Experts Exchange solution Uses "<select onchange="writeNew(this)">" and places the selected item from dropdown SELECT BOX (in text format) in the <span id="myText">***</span> HTML tag).

My HTML form uses the "<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">" option.

I'd like a solution that works along the Experts Exchange style.

Any assistance you can provide is greatly appreciated.

Thanks, in advance.

dartanion_jm
_______________________
Ideal Experts Exchange solution that works for a HTML form with a single drop box:


Title: Dynamic text based on Drop down box selection?

      asked by edmicman on 06/20/2003 01:42PM PDT  
      This solution was worth  75 Points and received a grade of A  
 
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20655362.html?query=html+get+text+value+of+select+box&clearTAFilter=true


Accepted Answer from cubrovic
       Date: 06/20/2003 02:10PM PDT
       Grade: A

Home All Topics Web Development Web Languages JavaScript Q_20655362.html

ORIGINAL CODE SOLUTION:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function writeNew(s) {
var sp = document.getElementById("myText")
var so = s.options[s.selectedIndex]
var txt = so.innerHTML
var val = so.value
sp.innerHTML = txt + " : "+val
}
// -->
</script>
</head>
<body>
<form action="">
<select onchange="writeNew(this)">
     <option value="value1">Text 1</option>
     <option value="value2">Text 2</option>
     <option value="value3">Text 3</option>
</select>
<span id="myText">***</span>
</form>
</body>
</html>


Can this solution be modified to work for a form that 3 (Javascript) dropdown SELECT BOXES?
_______________________

Code: My Form that has 3 (Javascript) dropdown SELECT BOXES


<html>
<head>
      <title>Dynamic Combo Box - 3 Boxes - 4 Levels</title>


</head>

<body bottommargin="5" topmargin="5" leftmargin="10" rightmargin="5" marginheight="5" marginwidth="5" bgcolor="white">


                        <tr><td colspan="2" bgcolor="#DBEAF5">&nbsp;</td></tr>
                  </table>
                  </td></tr></table>
                  <BR>&nbsp;</td>
<BR><BR>
<script language="JavaScript" type="text/javascript">
<!--
 data_1 = new Option("Product 1 (USA)", "$");
 data_2 = new Option("Product 2 (CAN)", "$");
 data_3 = new Option("Product 3 (CAN)", "$");
 data_4 = new Option("Product 4 (USA)", "$");
 data_1_1 = new Option("Shipping Hub 31 (AZ)", "-");
 data_1_2 = new Option("Shipping Hub 32 (AZ)", "-");
 data_1_3 = new Option("Shipping Hub 33 (AZ)", "-");
 data_1_4 = new Option("Shipping Hub 34 (AZ)", "-");
 data_2_1 = new Option("Shipping Hub 72 (AC)", "-");
 data_2_2 = new Option("Shipping Hub 73 (AC)", "-");
 data_2_3 = new Option("Shipping Hub 74 (AC)", "-");
 data_2_4 = new Option("Shipping Hub 75 (AC)", "-");
 data_2_5 = new Option("Shipping Hub 76 (AC)", "-");
 data_2_6 = new Option("Shipping Hub 77 (AC)", "-");
 data_2_7 = new Option("Shipping Hub 78 (AC)", "-");
 data_3_1 = new Option("Shipping Hub 104 (BC)", "-");
 data_3_2 = new Option("Shipping Hub 105 (BC)", "-");
 data_3_3 = new Option("Shipping Hub 106 (BC)", "-");
 data_3_4 = new Option("Shipping Hub 107 (BC)", "-");
 data_3_5 = new Option("Shipping Hub 108 (BC)", "-");
 data_4_1 = new Option("Shipping Hub 001 (CA)", "-");
 data_4_2 = new Option("Shipping Hub 002 (CA)", "-");
 data_4_3 = new Option("Shipping Hub 003 (CA)", "-");
 data_4_4 = new Option("Shipping Hub 004 (CA)", "-");
 data_4_5 = new Option("Shipping Hub 005 (CA)", "-");
 data_4_6 = new Option("Shipping Hub 006 (CA)", "-");
 data_1_1_1 = new Option("Monday", "*");
 data_1_1_2 = new Option("Tuesday", "*");
 data_1_1_3 = new Option("Wednesday", "*");
 data_1_1_4 = new Option("Thursday", "*");
 data_1_1_5 = new Option("Friday", "*");
 data_1_1_6 = new Option("Saturday", "*");
 data_1_2_1 = new Option("Monday", "*");
 data_1_2_2 = new Option("Tuesday", "*");
 data_1_2_3 = new Option("Wednesday", "*");
 data_1_2_4 = new Option("Thursday", "*");
 data_1_2_5 = new Option("Friday", "*");
 data_1_2_6 = new Option("Saturday", "*");
 data_1_3_1 = new Option("Wednesday", "*");
 data_1_3_2 = new Option("Saturday", "*");
 data_1_4_1 = new Option("Wednesday", "*");
 data_1_4_2 = new Option("Saturday", "*");
 data_2_1_1 = new Option("Wednesday", "*");
 data_2_1_2 = new Option("Saturday", "*");
 data_2_2_1 = new Option("Thursday", "*");
 data_2_3_1 = new Option("Wednesday", "*");
 data_2_3_2 = new Option("Saturday", "*");
 data_2_4_1 = new Option("Friday", "*");
 data_2_5_1 = new Option("Monday", "*");
 data_2_5_2 = new Option("Tuesday", "*");
 data_2_5_3 = new Option("Wednesday", "*");
 data_2_5_4 = new Option("Thursday", "*");
 data_2_5_5 = new Option("Friday", "*");
 data_2_5_6 = new Option("Saturday", "*");
 data_2_5_7 = new Option("Sunday", "*");
 data_2_6_1 = new Option("Wednesday", "*");
 data_2_6_2 = new Option("Saturday", "*");
 data_2_7_1 = new Option("Monday", "*");
 data_2_7_2 = new Option("Tuesday", "*");
 data_2_7_3 = new Option("Wednesday", "*");
 data_2_7_4 = new Option("Thursday", "*");
 data_2_7_5 = new Option("Friday", "*");
 data_2_7_6 = new Option("Saturday", "*");
 data_2_7_7 = new Option("Sunday", "*");
 data_3_1_1 = new Option("Wednesday", "*");
 data_3_1_2 = new Option("Saturday", "*");
 data_3_2_1 = new Option("Wednesday", "*");
 data_3_2_2 = new Option("Saturday", "*");
 data_3_3_1 = new Option("Friday", "*");
 data_3_4_1 = new Option("Monday", "*");
 data_3_4_2 = new Option("Tuesday", "*");
 data_3_4_3 = new Option("Wednesday", "*");
 data_3_4_4 = new Option("Thursday", "*");
 data_3_4_5 = new Option("Friday", "*");
 data_3_4_6 = new Option("Saturday", "*");
 data_3_4_7 = new Option("Sunday", "*");
 data_3_5_1 = new Option("Wednesday", "*");
 data_3_5_2 = new Option("Saturday", "*");
 data_4_1_1 = new Option("Monday", "*");
 data_4_1_2 = new Option("Tuesday", "*");
 data_4_1_3 = new Option("Wednesday", "*");
 data_4_1_4 = new Option("Thursday", "*");
 data_4_1_5 = new Option("Friday", "*");
 data_4_1_6 = new Option("Saturday", "*");
 data_4_1_7 = new Option("Sunday", "*");
 data_4_2_1 = new Option("Monday", "*");
 data_4_2_2 = new Option("Tuesday", "*");
 data_4_2_3 = new Option("Wednesday", "*");
 data_4_2_4 = new Option("Thursday", "*");
 data_4_2_5 = new Option("Friday", "*");
 data_4_2_6 = new Option("Saturday", "*");
 data_4_2_7 = new Option("Sunday", "*");
 data_4_3_1 = new Option("Monday", "*");
 data_4_3_2 = new Option("Tuesday", "*");
 data_4_3_3 = new Option("Wednesday", "*");
 data_4_3_4 = new Option("Thursday", "*");
 data_4_3_5 = new Option("Friday", "*");
 data_4_3_6 = new Option("Saturday", "*");
 data_4_3_7 = new Option("Sunday", "*");
 data_4_4_1 = new Option("Tuesday", "*");
 data_4_4_2 = new Option("Friday", "*");
 data_4_5_1 = new Option("Monday", "*");
 data_4_5_2 = new Option("Tuesday", "*");
 data_4_5_3 = new Option("Wednesday", "*");
 data_4_5_4 = new Option("Thursday", "*");
 data_4_5_5 = new Option("Friday", "*");
 data_4_5_6 = new Option("Saturday", "*");
 data_4_5_7 = new Option("Sunday", "*");
 data_4_6_1 = new Option("Wednesday", "*");
 data_4_6_2 = new Option("Saturday", "*");

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function change(currentbox) {
      numb = currentbox.id.split("_");
      currentbox = numb[1];

    i=parseInt(currentbox)+1



    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
         son = document.getElementById("combo_"+i);

           for (m=son.options.length-1;m>0;m--) son.options[m]=null;

           son.options[0]=new Option(displaywhenempty,valuewhenempty)
           i=i+1
    }




    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
           (document.getElementById("combo_"+i)!=null)) {
           eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
           if (i==currentbox) break;
           i=i+1
    }




    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
       (document.getElementById("combo_"+following)!=null)) {
       son = document.getElementById("combo_"+following);
       stringa=stringa+"_"
       i=0
       while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {



                 if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
                     if (eval("typeof("+stringa+"1)=='undefined'"))
                        eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
                     else
                   eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
            else
              eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
            i=i+1
         }
       //son.focus()
       i=1
       combostatus=''
       cstatus=stringa.split("_")
       while (cstatus[i]!=null) {
          combostatus=combostatus+cstatus[i]
          i=i+1
          }
       return combostatus;
    }
}


                </script>

<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
 <option value="value1">-Select-</option>
 <option value="value2">Product 1 (USA)</option>
 <option value="value3">Product 2 (CAN)</option>
 <option value="value4">Product 3 (CAN)</option>
 <option value="value5">Product 4 (USA)</option>
</select>
&nbsp;&nbsp;&nbsp;
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
      <option value="value1">  </option>
</select>&nbsp;&nbsp;&nbsp;
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
      <option value="value1">  </option>
</select>

</form>

<p align="center"><font face="arial" size="-2"></font><br>
<font face="arial, helvetica" size="-2"></font></p>                  
</body>
</html>
_______________________
dartanion_jmAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

callrsCommented:
Replace the last part with this:

      return combostatus;
    }
}

function writeNew(obj){
var frm=obj.form;
var s=frm.combo0[frm.combo0.selectedIndex].text;
var sv=frm.combo0.value;
var t=frm.combo1[frm.combo1.selectedIndex].text;
var tv=frm.combo1.value;
var u=frm.combo2[frm.combo2.selectedIndex].text;
var uv=frm.combo2.value;
var All=s+":"+sv+"<br>"+t+":"+tv+"<br>"+u+":"+uv;


document.getElementById("myText").innerHTML=All;

}
                </script>

<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
 <option value="value1">-Select-</option>
 <option value="value2">Product 1 (USA)</option>
 <option value="value3">Product 2 (CAN)</option>
 <option value="value4">Product 3 (CAN)</option>
 <option value="value5">Product 4 (USA)</option>
</select>
&nbsp;&nbsp;&nbsp;
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
     <option value="value1">  </option>
</select>&nbsp;&nbsp;&nbsp;
<select name="combo2" id="combo_2" onChange="change(this);writeNew(this)">" style="width:200px;">
     <option value="value1">  </option>
</select>

</form>

<p align="center"><font face="arial" size="-2"></font><br>
<font face="arial, helvetica" size="-2"></font></p>              

<div id="myText">***</div>

</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dartanion_jmAuthor Commented:
Thank You for your efforts callrs!!.

I'll give it a try and get back to you you know.
dartanion_jmAuthor Commented:
Greetings callrs. That's exactly what I was looking for. WELL DONE!. Thanks for the "quick turnaround".  Sign here to join the new Callrs Fan Club:__________________________________.
callrsCommented:
lol
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.