?
Solved

This is all about multiple dropdown boxes and onchange procedure

Posted on 2003-03-18
12
Medium Priority
?
3,710 Views
Last Modified: 2008-10-13
hey guys,

I am using s scrip i found on the net about asp and multiple dropdown boxes
but i need if possible to take the ifo gather by the dropdowns and in the last one
place it in another text field in the asp page.....

so i have
dropdown
dropdown
dropdown
textfeild

now even better would be that the text field only apears once the last dropdown option is selected
is this possible??

my code so far is below
note i have change some of the fields to suite my needs

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>OptionEx Include</TITLE>
<!--include the library-->
<script language=Javascript src="optionex.js"></script>
<script language=Javascript>

//create ourlink list of different model Series
var oModelSeries = new OptionCollection();
//add a few entries this can also be written via asp dynamically
//3 series
oModelSeries.Add("Lancer","Lancer","3S");
oModelSeries.Add("Evolution","Evolution","3S");
//5 series
oModelSeries.Add("Getz","Getz","5S");
oModelSeries.Add("Sonata","Sonata","5S");
oModelSeries.Add("Grandure","Grandure","5S");
//7 series
oModelSeries.Add("Camry","Camry","7S");
oModelSeries.Add("Corolla","Corolla","7S");
oModelSeries.Add("Avalon","Avalon","7S");

//okay so we have all the series for the models.
//lets add the colors of the series.
//again this can be written dynamically
var oSeriesColors = new OptionCollection();
oSeriesColors.Add("15000","2 Door Auto","Getz");
oSeriesColors.Add("14000","2 Door Manual","Getz");
oSeriesColors.Add("20000","2 Door Auto","Sonata");
oSeriesColors.Add("19000","2 Door Manual","Sonata");
oSeriesColors.Add("18500","2 Door Auto","Sonata");
oSeriesColors.Add("17500","2 Door Manual","Sonata");
oSeriesColors.Add("30000","2 Door Auto","Grandure");
oSeriesColors.Add("29000","2 Door Manual","Grandure");
</script>
</HEAD>
<BODY>
<p align=center>
<table>
  <form name=carform id=carform>
    <tr>
      <td> <table>
          <tr>
            <td><font face=arial size=2> <p class=MsoNormal>&nbsp;</p></td>
          </tr>
        </table></td>
    </tr><tr>
    <td> <table>
        <tr>
          <td colspan=6><font face=arial size=2><b>Example&nbsp;:&nbsp; select
            the Model of interest and get all avaliable Series and color(s)</font></td>
        </tr></tr>
        <tr>
          <!--parent select-->
          <td align=right valign=top><font face=arial size=2><b>Model&nbsp;:&nbsp;</b></font></td>
          <td align=left valign=top><SELECT name=model id=model onchange="UpdateSelect('series','carform',this.options[this.selectedIndex].value,oModelSeries);">
              <option value="">[Select a Model]</option>
              <option value="7S">Toyota</option>
              <option value="5S">Hyundai</option>
              <option value="3S">Mitsubishi</option>
            </select></td>
          <td align=right bgcolor=lightgrey><font face=arial size=2><b>Series&nbsp;:&nbsp;</b></font><br>
            <a href="javascript:clearOptions('series','carform');"><font face=arial size=2><b>Clear
            All!</b></font></a> </td>
          <!--blank dummy option, need for navigator to set the size of dropdown list-->
          <!-- three options a list is fine-->
          <!--IE dynamically resizes the width of the select navigator doesn't-->
          <!--so just give the option blank space or caption to set the size-->
          <td align=left valign=top><SELECT name=series id=series onchange="UpdateSelect('carcolors','carform',this.options[this.selectedIndex].value,oSeriesColors);">
              <option>[Select a Series]</option>
              <option></option>
              <option></option>
              <option></option>
            </select></td>
          <td align=right bgcolor=lightgrey><font face=arial size=2><b>Color(s)&nbsp;:&nbsp;</b></font><br>
            <a href="javascript:clearOptions('carcolors','carform');"><font face=arial size=2><b>Clear
            All!</b></font></a> </td>
          <td align=left valign=top><SELECT name=carcolors id=carcolors>
              <option>[Select a color(s)]</option>
              <option></option>
              <option></option>
              <option></option>
            </select></td>
        </tr>
      </table></td></tr>
  </form>
</table>
</BODY>
</HTML>

0
Comment
Question by:mofoworking
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 10

Expert Comment

by:apollois
ID: 8164256
Hi mofoworking,

Here is a complete working example of the dropdown puting data in a textbox.  I check with you later for followup questions:

================================================================
<html>
<head>

<SCRIPT language="javascript">

function setText(pobjSelect, pstrTextName) {
     var oText
     
     
     oText = eval('document.' + pobjSelect.form.name + '.' + pstrTextName)
     oText.value = oText.value + " " + pobjSelect.options(pobjSelect.selectedIndex).value

     return
}

</SCRIPT>

<title>New Page 1</title>
</head>

<body>

<form method="POST" name="MyForm">
     <p>Make a choice: <select size="1" name="MyList" onChange="setText(this, 'MyText');">
     <option selected>-- Select One --</option>
     <option value="A">100</option>
     <option value="B">200</option>
     <option value="C">300</option>
     <option value="D">400</option>
     </select></p>
     <p>MyText: <input type="text" name="MyText" size="20"></p>
     <p><input type="submit" value="Submit" name="Submit"></p>
</form>

</body>

</html>
======================================================================

Best Regards,
>apollois<
0
 
LVL 10

Accepted Solution

by:
apollois earned 1000 total points
ID: 8164270
mofoworking,

This uses the "onChange" event to copy the value of the dropdown (SELECT OPTION) to the textbox.

Your situation is a little more complicated if you want to combine the values of all your dropdowns into one textbox.  You have to handle the user making a 2nd change to the dropdown.  How do you want to handle this?

Best Regards,
>apollois<
0
 
LVL 2

Author Comment

by:mofoworking
ID: 8164323
can you clear the text box before it adds a new entry?
instead off just adding to it?

otherwise it is a great solution
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Author Comment

by:mofoworking
ID: 8164332
never mid i worked it out

thanks very much for your help
0
 
LVL 15

Expert Comment

by:gladxml
ID: 8164457
mofoworking,

Below is th erevise code... try to check it out...


<!-- saved from url=(0022)http://internet.e-mail -->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>OptionEx Include</TITLE>
<!--include the library-->
<script language=Javascript src="optionex.js"></script>
<script language=Javascript>

//create ourlink list of different model Series
var oModelSeries = new OptionCollection();
//add a few entries this can also be written via asp dynamically
//3 series
oModelSeries.Add("318","318  Series","3S");
oModelSeries.Add("318s","318s  Series","3S");
oModelSeries.Add("320","320 Series","3S");
oModelSeries.Add("325","325 Series","3S");
oModelSeries.Add("328","328 Series","3S");
oModelSeries.Add("M3","M3 Series","3S");
//5 series
oModelSeries.Add("520","520 Series","5S");
oModelSeries.Add("525","525 Series","5S");
oModelSeries.Add("535","535 Series","5S");
oModelSeries.Add("540","540 Series","5S");
oModelSeries.Add("M5","M5","5S");
//7 series
oModelSeries.Add("735","735 Series","7S");
oModelSeries.Add("740","740 Series","7S");
oModelSeries.Add("750","750 Series","7S");

//okay so we have all the series for the models.
//lets add the colors of the series.
//again this can be written dynamically
var oSeriesColors = new OptionCollection();
oSeriesColors.Add("318red","Red color","318");
oSeriesColors.Add("318navy","Navy color","318");
oSeriesColors.Add("318silver","Silver color","318");
oSeriesColors.Add("318swhite","Red color","318s");
oSeriesColors.Add("318snavy","Navy color","318s");
oSeriesColors.Add("320silver","silver color","320");
oSeriesColors.Add("325white","white color","325");
oSeriesColors.Add("325red","red color","325");
oSeriesColors.Add("328navy","Navy color","328");
oSeriesColors.Add("328black","Black color","328");
oSeriesColors.Add("m3yellow","Yellow color","M3");
oSeriesColors.Add("m3gray","Gray color","M3");
//5 series
oSeriesColors.Add("520red","Red color","520");
oSeriesColors.Add("520navy","Navy color","520");
oSeriesColors.Add("520silver","Silver color","520");
oSeriesColors.Add("525white","Red color","525");
oSeriesColors.Add("525navy","Navy color","525");
oSeriesColors.Add("535silver","Silver color","535");
oSeriesColors.Add("535white","white color","535");
oSeriesColors.Add("535red","red color","535");
oSeriesColors.Add("540navy","Navy color","540");
oSeriesColors.Add("m5yellow","Yellow color","M5");
oSeriesColors.Add("m5gray","Gray color","M5");
//7 series
oSeriesColors.Add("735red","Red color","735");
oSeriesColors.Add("735navy","Navy color","735");
oSeriesColors.Add("740silver","Silver color","740");
oSeriesColors.Add("740white","Red color","740");
oSeriesColors.Add("740navy","Navy color","740");
oSeriesColors.Add("750silver","Silver color","750");


function checkifempty(){
document.carform.textfield.value = document.carform.model.value + ' ' +document.carform.series.value + ' ' + document.carform.carcolors.value

}


</script>
</HEAD>
<BODY>
<p align=center><h1>ASP Tips and Tricks</h1>
<table>
  <form name=carform id=carform>
    <tr>
      <!--parent select-->
      <td align=right valign=top><font face=arial size=2><b>Model&nbsp;:&nbsp;</b></font></td>
      <td align=left valign=top>
        <SELECT name=model id=model onchange="UpdateSelect('series','carform',this.options[this.selectedIndex].value,oModelSeries);">
          <option value="">[Select a Model]</option>
          <option value="7S">BMW 7 Series</option>
          <option value="5S">BMW 5 Series</option>
          <option value="3S">BMW 3 Series</option>
        </select>
      </td>
      <td align=right bgcolor=lightgrey><font face=arial size=2><b>Series&nbsp;:&nbsp;</b></font><br>
        <a href="javascript:clearOptions('series','carform');"><font face=arial size=2><b>Clear
        All!</b></font></a> </td>
      <!--blank dummy option, need for navigator to set the size of dropdown list-->
      <!-- three options a list is fine-->
      <!--IE dynamically resizes the width of the select navigator doesn't-->
      <!--so just give the option blank space or caption to set the size-->
      <td align=left valign=top>
        <SELECT name=series id=series onchange="UpdateSelect('carcolors','carform',this.options[this.selectedIndex].value,oSeriesColors);">
          <option>[Select a Series]</option>
          <option></option>
          <option></option>
          <option></option>
        </select>
      </td>
      <td align=right bgcolor=lightgrey><font face=arial size=2><b>Color(s)&nbsp;:&nbsp;</b></font><br>
        <a href="javascript:clearOptions('carcolors','carform');"><font face=arial size=2><b>Clear
        All!</b></font></a> </td>
      <td align=left valign=top>
        <SELECT name=carcolors id=carcolors onChange="checkifempty();">
          <option>[Select a color(s)]</option>
          <option></option>
          <option></option>
          <option></option>
        </select>
      </td>
    </tr>
    <tr>
      <td align=right valign=top colspan="6" height="29">
        <div align="left">
          <input type="text" name="textfield">
          @</div>
      </td>
    </tr>
   
  </form>
</table>
      

</BODY>
</HTML>
0
 
LVL 15

Expert Comment

by:gladxml
ID: 8164713
mofoworking,

>>>>>>>
now even better would be that the text field only apears once the last dropdown option is selected
is this possible??
>>>>>>>

I manage to solve the above requirement try to check it out...


<!-- saved from url=(0022)http://internet.e-mail -->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>OptionEx Include</TITLE>
<!--include the library-->
<script language=Javascript src="optionex.js"></script>
<script language=Javascript>

//create ourlink list of different model Series
var oModelSeries = new OptionCollection();
//add a few entries this can also be written via asp dynamically
//3 series
oModelSeries.Add("318","318  Series","3S");
oModelSeries.Add("318s","318s  Series","3S");
oModelSeries.Add("320","320 Series","3S");
oModelSeries.Add("325","325 Series","3S");
oModelSeries.Add("328","328 Series","3S");
oModelSeries.Add("M3","M3 Series","3S");
//5 series
oModelSeries.Add("520","520 Series","5S");
oModelSeries.Add("525","525 Series","5S");
oModelSeries.Add("535","535 Series","5S");
oModelSeries.Add("540","540 Series","5S");
oModelSeries.Add("M5","M5","5S");
//7 series
oModelSeries.Add("735","735 Series","7S");
oModelSeries.Add("740","740 Series","7S");
oModelSeries.Add("750","750 Series","7S");

//okay so we have all the series for the models.
//lets add the colors of the series.
//again this can be written dynamically
var oSeriesColors = new OptionCollection();
oSeriesColors.Add("318red","Red color","318");
oSeriesColors.Add("318navy","Navy color","318");
oSeriesColors.Add("318silver","Silver color","318");
oSeriesColors.Add("318swhite","Red color","318s");
oSeriesColors.Add("318snavy","Navy color","318s");
oSeriesColors.Add("320silver","silver color","320");
oSeriesColors.Add("325white","white color","325");
oSeriesColors.Add("325red","red color","325");
oSeriesColors.Add("328navy","Navy color","328");
oSeriesColors.Add("328black","Black color","328");
oSeriesColors.Add("m3yellow","Yellow color","M3");
oSeriesColors.Add("m3gray","Gray color","M3");
//5 series
oSeriesColors.Add("520red","Red color","520");
oSeriesColors.Add("520navy","Navy color","520");
oSeriesColors.Add("520silver","Silver color","520");
oSeriesColors.Add("525white","Red color","525");
oSeriesColors.Add("525navy","Navy color","525");
oSeriesColors.Add("535silver","Silver color","535");
oSeriesColors.Add("535white","white color","535");
oSeriesColors.Add("535red","red color","535");
oSeriesColors.Add("540navy","Navy color","540");
oSeriesColors.Add("m5yellow","Yellow color","M5");
oSeriesColors.Add("m5gray","Gray color","M5");
//7 series
oSeriesColors.Add("735red","Red color","735");
oSeriesColors.Add("735navy","Navy color","735");
oSeriesColors.Add("740silver","Silver color","740");
oSeriesColors.Add("740white","Red color","740");
oSeriesColors.Add("740navy","Navy color","740");
oSeriesColors.Add("750silver","Silver color","750");

function show(id) {
        //if (ns4) document.layers[id].visibility = "show"
        //else if (ie4)
            document.all[id].style.visibility = "visible"
}

function hide(id) {
        //if (ns4) document.layers[id].visibility = "hide"
        //else if (ie4)
            document.all[id].style.visibility = "hidden"
}

function textempty(){

document.carform.textfield.value = ""

}

function checkifempty(){

show('divshowhide');

document.carform.textfield.value = document.carform.model.value + ' ' +document.carform.series.value + ' ' + document.carform.carcolors.value

}


</script>
</HEAD>
<BODY onload="hide('divshowhide');">
<p align=center><h1>ASP Tips and Tricks</h1>
<table>
  <form name=carform id=carform>
    <tr>
      <!--parent select-->
      <td align=right valign=top><font face=arial size=2><b>Model&nbsp;:&nbsp;</b></font></td>
      <td align=left valign=top>
        <SELECT name=model id=model onchange="UpdateSelect('series','carform',this.options[this.selectedIndex].value,oModelSeries);hide('divshowhide');textempty();">
          <option value="">[Select a Model]</option>
          <option value="7S">BMW 7 Series</option>
          <option value="5S">BMW 5 Series</option>
          <option value="3S">BMW 3 Series</option>
        </select>
      </td>
      <td align=right bgcolor=lightgrey><font face=arial size=2><b>Series&nbsp;:&nbsp;</b></font><br>
        <a href="javascript:clearOptions('series','carform');"><font face=arial size=2><b>Clear
        All!</b></font></a> </td>
      <!--blank dummy option, need for navigator to set the size of dropdown list-->
      <!-- three options a list is fine-->
      <!--IE dynamically resizes the width of the select navigator doesn't-->
      <!--so just give the option blank space or caption to set the size-->
      <td align=left valign=top>
        <SELECT name=series id=series onchange="UpdateSelect('carcolors','carform',this.options[this.selectedIndex].value,oSeriesColors);hide('divshowhide');textempty();">
          <option>[Select a Series]</option>
          <option></option>
          <option></option>
          <option></option>
        </select>
      </td>
      <td align=right bgcolor=lightgrey><font face=arial size=2><b>Color(s)&nbsp;:&nbsp;</b></font><br>
        <a href="javascript:clearOptions('carcolors','carform');"><font face=arial size=2><b>Clear
        All!</b></font></a> </td>
      <td align=left valign=top>
        <SELECT name=carcolors id=carcolors onChange="checkifempty();">
          <option>[Select a color(s)]</option>
          <option></option>
          <option></option>
          <option></option>
        </select>
      </td>
    </tr>
    <tr>
      <td align=right valign=top colspan="6" height="29">
        <div align="left" ID="divshowhide" STYLE="position:absolute;; left: 17px; top: 104px; width: 120px; height: 28px">
          <input type="text" name="textfield">
          @</div>
      </td>
    </tr>
   
  </form>
</table>
      

</BODY>
</HTML>


HAppy programming...
0
 
LVL 10

Expert Comment

by:apollois
ID: 8164721
gladxml,

Have you noticed that this question has been answered and is closed?

Best Regards,
>apollois<
0
 
LVL 15

Expert Comment

by:gladxml
ID: 8164833
@apollois,

<<<
Have you noticed that this question has been answered and is closed?
<<<

Sorry I encountered some difficulty in my connection...

When I posted my first comment it disconnected...

But decided to go ahead and find a solution to the problem...

Since I manage to make a working code with the requirement given by mofoworking it better to post here rather than go to waste...

Just trying to help...



@mofoworking

try it out...

Best Regards,
gladxml
0
 
LVL 2

Author Comment

by:mofoworking
ID: 8170202
You are a champ
i forgot about that part of my question :)

Thanks very much

0
 
LVL 15

Expert Comment

by:gladxml
ID: 8170986
mofoworking,

I was hoping that you will be generous to give some points...

just kidding...

Glad to be of help...

Regards,
gladxml
0
 
LVL 2

Author Comment

by:mofoworking
ID: 8171030
sorry about that
but how do you split points up?

0
 
LVL 15

Expert Comment

by:gladxml
ID: 8171091
mofoworking,

No dont do that it is unfair to apollois...

It is also improper since you already accepted an answer...

If you dont have that much point it is ok...

Good luck on your project...

Regards,
gladxml
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
In this video, Percona Solutions Engineer Barrett Chambers discusses some of the basic syntax differences between MySQL and MongoDB. To learn more check out our webinar on MongoDB administration for MySQL DBA: https://www.percona.com/resources/we…
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question