Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3719
  • Last Modified:

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>

0
mofoworking
Asked:
mofoworking
  • 5
  • 4
  • 3
1 Solution
 
apolloisCommented:
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
 
apolloisCommented:
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
 
mofoworkingAuthor Commented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mofoworkingAuthor Commented:
never mid i worked it out

thanks very much for your help
0
 
gladxmlCommented:
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
 
gladxmlCommented:
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
 
apolloisCommented:
gladxml,

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

Best Regards,
>apollois<
0
 
gladxmlCommented:
@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
 
mofoworkingAuthor Commented:
You are a champ
i forgot about that part of my question :)

Thanks very much

0
 
gladxmlCommented:
mofoworking,

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

just kidding...

Glad to be of help...

Regards,
gladxml
0
 
mofoworkingAuthor Commented:
sorry about that
but how do you split points up?

0
 
gladxmlCommented:
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now