Link to home
Start Free TrialLog in
Avatar of mofoworking
mofoworking

asked on

This is all about multiple dropdown boxes and onchange procedure

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>

Avatar of apollois
apollois
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<
ASKER CERTIFIED SOLUTION
Avatar of apollois
apollois
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 mofoworking
mofoworking

ASKER

can you clear the text box before it adds a new entry?
instead off just adding to it?

otherwise it is a great solution
Avatar of mofoworking
mofoworking

ASKER

never mid i worked it out

thanks very much for your help
Avatar of gladxml
gladxml
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>
Avatar of gladxml
gladxml
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...
Avatar of apollois
apollois
gladxml,

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

Best Regards,
>apollois<
Avatar of gladxml
gladxml
@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
Avatar of mofoworking
mofoworking

ASKER

You are a champ
i forgot about that part of my question :)

Thanks very much

Avatar of gladxml
gladxml
mofoworking,

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

just kidding...

Glad to be of help...

Regards,
gladxml
Avatar of mofoworking
mofoworking

ASKER

sorry about that
but how do you split points up?

Avatar of gladxml
gladxml
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