Link to home
Start Free TrialLog in
Avatar of dartanion_jm
dartanion_jm

asked on

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  
 
https://www.experts-exchange.com/questions/20655362/Dynamic-text-based-on-Drop-down-box-selection.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>
_______________________
ASKER CERTIFIED SOLUTION
Avatar of callrs
callrs
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dartanion_jm
dartanion_jm

ASKER

Thank You for your efforts callrs!!.

I'll give it a try and get back to you you know.
Avatar of dartanion_jm
dartanion_jm

ASKER

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:__________________________________.
Avatar of callrs
callrs
lol