Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Conditional javascript 1

Status
Not open for further replies.
lazydays

lazydays

Technical User
Sep 29, 2003
93
GB
Hi,

I am having a problem as I know very little about javascript.

I have a form with 3 drop down boxes - the first box is a populated using thestandard <SELECT> tag.
The 2nd box is populated with values depending on the choice made in the 1st box, and the 3rd box depends on the choice in the 2nd.

This all works fine.
However, I want to be able to display some explanation text after the first drop down box - and the text will depend on the choice made in the first box.
This is where I have no idea!

Any help gratefully received!

My code so far:

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();


<!-- Designer -->
arrItems1[1] = "Standard";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Educational";
arrItemsGrp1[2] = 1;
<!-- End of Designer -->


<!-- CorelDraw Graphics Suite -->
arrItems1[3] = "Standard";
arrItemsGrp1[3] = 2;
<!-- End of CorelDraw Graphics Suite -->


<!-- Grafigo -->
arrItems1[4] = "Standard";
arrItemsGrp1[4] = 3;
<!-- End of Grafigo -->


<!-- Ventura -->
arrItems1[5] = "Standard";
arrItemsGrp1[5] = 4;
arrItems1[6] = "Educational";
arrItemsGrp1[6] = 4;
<!-- End of Ventura -->


<!-- Paradox Standalone -->
arrItems1[7] = "Standard";
arrItemsGrp1[7] = 5;
<!-- End of Paradox Standalone -->


<!-- Painter -->
arrItems1[8] = "Standard";
arrItemsGrp1[8] = 6;
arrItems1[9] = "Educational";
arrItemsGrp1[9] = 6;
<!-- End of Painter -->


<!-- WordPerfect Office Standard -->
arrItems1[10] = "Standard";
arrItemsGrp1[10] = 7;
arrItems1[11] = "Educational";
arrItemsGrp1[11] = 7;
<!-- End of WordPerfect Office Standard -->


<!-- WordPerfect Office Standard -->
arrItems1[12] = "Standard";
arrItemsGrp1[12] = 8;
<!-- End of WordPerfect Office Standard -->



var arrItems2 = new Array();
var arrItemsGrp2 = new Array();



<!-- Designer -->
arrItems2[2000] = "New Licence";
arrItemsGrp2[2000] = 1;
arrItems2[2001] = "Upgrade Licence";
arrItemsGrp2[2001] = 1;
arrItems2[2002] = "Maintenance";
arrItemsGrp2[2002] = 1;

arrItems2[2003] = "New Licence";
arrItemsGrp2[2003] = 2;
arrItems2[2005] = "Maintenance";
arrItemsGrp2[2005] = 2;
<!-- End of Designer -->


<!-- CorelDraw Graphics Suite -->
arrItems2[2006] = "New Licence";
arrItemsGrp2[2006] = 3;
arrItems2[2007] = "Upgrade Licence";
arrItemsGrp2[2007] = 3;
arrItems2[2008] = "Maintenance";
arrItemsGrp2[2008] = 3;
<!-- End of CorelDraw Graphics Suite -->


<!-- Grafigo -->
arrItems2[2009] = "New Licence";
arrItemsGrp2[2009] = 4;
<!-- End of Grafigo -->


<!-- Ventura -->
arrItems2[2010] = "New Licence";
arrItemsGrp2[2010] = 5;
arrItems2[2011] = "Upgrade Licence";
arrItemsGrp2[2011] = 5;
arrItems2[2012] = "Maintenance";
arrItemsGrp2[2012] = 5;

arrItems2[2013] = "New Licence";
arrItemsGrp2[2013] = 6;
<!-- End of Ventura -->


<!-- Paradox Standalone -->
arrItems2[2014] = "New Licence";
arrItemsGrp2[2014] = 7;
arrItems2[2015] = "Upgrade Licence";
arrItemsGrp2[2015] = 7;
<!-- end of Paradox Standalone -->


<!-- Ventura -->
arrItems2[2016] = "New Licence";
arrItemsGrp2[2016] = 8;
arrItems2[2017] = "Upgrade Licence";
arrItemsGrp2[2017] = 8;
arrItems2[2018] = "Maintenance";
arrItemsGrp2[2018] = 8;

arrItems2[2019] = "New Licence";
arrItemsGrp2[2019] = 9;
arrItems2[2020] = "Maintenance";
arrItemsGrp2[2020] = 9;
<!-- End of Ventura -->


<!-- WordPerfect Office Standard -->
arrItems2[2021] = "New Licence";
arrItemsGrp2[2021] = 10;
arrItems2[2022] = "Upgrade Licence";
arrItemsGrp2[2022] = 10;
arrItems2[2023] = "Maintenance - 1 year";
arrItemsGrp2[2023] = 10;
arrItems2[2024] = "Maintenance - 2 years";
arrItemsGrp2[2024] = 10;

arrItems2[2025] = "New Licence";
arrItemsGrp2[2025] = 11;
arrItems2[2026] = "Maintenance - 1 year";
arrItemsGrp2[2026] = 11;
arrItems2[2027] = "Maintenance - 2 years";
arrItemsGrp2[2027] = 11;
<!-- End of WordPerfect Office Standard -->


<!-- WordPerfect Office Professional -->
arrItems2[2028] = "New Licence";
arrItemsGrp2[2028] = 12;
arrItems2[2029] = "Upgrade Licence";
arrItemsGrp2[2029] = 12;
arrItems2[2030] = "Maintenance - 1 year";
arrItemsGrp2[2030] = 12;
arrItems2[2031] = "Maintenance - 2 years";
arrItemsGrp2[2031] = 12;
<!-- End of WordPerfect Office Professional -->




function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
var myEle ;
var x ;
// Empty the second drop down box of any choices
for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
if (control.name == "firstChoice") {
// Empty the third drop down box of any choices
for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
}
// ADD Default Choice - in case there are no values
myEle = document.createElement("option") ;
myEle.value = 0 ;
myEle.text = "-- please select --" ;
controlToPopulate.add(myEle) ;
// Now loop through the array of individual items
// Any containing the same child id are added to
// the second dropdown box
for ( x = 0 ; x < ItemArray.length ; x++ )
{
if ( GroupArray[x] == control.value )
{
myEle = document.createElement("option") ;
myEle.value = x ;
myEle.text = ItemArray[x] ;
controlToPopulate.add(myEle) ;
}
}
}
// End -->
</script>
</head>

<body>
<form name="myChoices" method="post" action="corel_result.php">
<table width="100%" align="center">
<tr>
<td width="40%"> <div align="right"> Product</div></TD>
<td width="5%"> <div align="center">:</div></TD>
<td> <SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
<option value=0 SELECTED>-- please select --</option>
<option value=1>Corel Designer</option>
<option value=2>CorelDraw Graphics Suite</option>
<option value=3>Corel Grafigo</option>
<option value=4>Corel Ventura</option>
<option value=5>Paradox Standalone</option>
<option value=6>Corel Painter</option>
<option value=7>WordPerfect Office Standard</option>
<option value=8>WordPerfect Office Professional</option>
</SELECT> </TD>
</TR>
<TR>
<TD><div align="right">Standard or Educational</div></TD>
<TD><div align="center">:</div></TD>
<TD> <SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
</SELECT></TD>
</TR>
<TR>
<TD><div align="right">Licence Type</div></TD>
<TD><div align="center">:</div></TD>
<TD> <SELECT id=thirdChoice name=thirdChoice onchange="selectChange(this, myChoices.fourthChoice, arrItems3, arrItemsGrp3);">
</SELECT></TD>
</TR>
<TR>
<TD><div align="right"></div></TD>
<TD><div align="center"></div></TD>
<TD> </TD>
</TR>
<TR>
<TD><div align="right">Number of Licences Required</div></TD>
<TD><div align="center">:</div></TD>
<TD><INPUT TYPE=text SIZE=5 NAME=licence_numbers></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD><INPUT TYPE=submit VALUE="Get Quote"></TD>
</TR>
</TABLE>
</form>
</body>
 
Sort by date Sort by votes
Want to display the text below the 1st drop down box and above the 2nd.

The first box is a list of products, and I want to display an explaination about what each product is.
 
Upvote 0 Downvote
Is this what you're looking for?

Code: 
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();


<!-- Designer -->
arrItems1[1] = "Standard";
arrItemsGrp1[1] = 1;
arrItems1[2] = "Educational";
arrItemsGrp1[2] = 1;
<!-- End of Designer -->


<!-- CorelDraw Graphics Suite -->
arrItems1[3] = "Standard";
arrItemsGrp1[3] = 2;
<!-- End of CorelDraw Graphics Suite -->


<!-- Grafigo -->
arrItems1[4] = "Standard";
arrItemsGrp1[4] = 3;
<!-- End of Grafigo -->


<!-- Ventura -->
arrItems1[5] = "Standard";
arrItemsGrp1[5] = 4;
arrItems1[6] = "Educational";
arrItemsGrp1[6] = 4;
<!-- End of Ventura -->


<!-- Paradox Standalone -->
arrItems1[7] = "Standard";
arrItemsGrp1[7] = 5;
<!-- End of Paradox Standalone -->


<!-- Painter -->
arrItems1[8] = "Standard";
arrItemsGrp1[8] = 6;
arrItems1[9] = "Educational";
arrItemsGrp1[9] = 6;
<!-- End of Painter -->


<!-- WordPerfect Office Standard -->
arrItems1[10] = "Standard";
arrItemsGrp1[10] = 7;
arrItems1[11] = "Educational";
arrItemsGrp1[11] = 7;
<!-- End of WordPerfect Office Standard -->


<!-- WordPerfect Office Standard -->
arrItems1[12] = "Standard";
arrItemsGrp1[12] = 8;
<!-- End of WordPerfect Office Standard -->



var arrItems2 = new Array();
var arrItemsGrp2 = new Array();



<!-- Designer -->
arrItems2[2000] = "New Licence";
arrItemsGrp2[2000] = 1;
arrItems2[2001] = "Upgrade Licence";
arrItemsGrp2[2001] = 1;
arrItems2[2002] = "Maintenance";
arrItemsGrp2[2002] = 1;

arrItems2[2003] = "New Licence";
arrItemsGrp2[2003] = 2;
arrItems2[2005] = "Maintenance";
arrItemsGrp2[2005] = 2;
<!-- End of Designer -->


<!-- CorelDraw Graphics Suite -->
arrItems2[2006] = "New Licence";
arrItemsGrp2[2006] = 3;
arrItems2[2007] = "Upgrade Licence";
arrItemsGrp2[2007] = 3;
arrItems2[2008] = "Maintenance";
arrItemsGrp2[2008] = 3;
<!-- End of CorelDraw Graphics Suite -->


<!-- Grafigo -->
arrItems2[2009] = "New Licence";
arrItemsGrp2[2009] = 4;
<!-- End of Grafigo -->


<!-- Ventura -->
arrItems2[2010] = "New Licence";
arrItemsGrp2[2010] = 5;
arrItems2[2011] = "Upgrade Licence";
arrItemsGrp2[2011] = 5;
arrItems2[2012] = "Maintenance";
arrItemsGrp2[2012] = 5;

arrItems2[2013] = "New Licence";
arrItemsGrp2[2013] = 6;
<!-- End of Ventura -->


<!-- Paradox Standalone -->
arrItems2[2014] = "New Licence";
arrItemsGrp2[2014] = 7;
arrItems2[2015] = "Upgrade Licence";
arrItemsGrp2[2015] = 7;
<!-- end of Paradox Standalone -->


<!-- Ventura -->
arrItems2[2016] = "New Licence";
arrItemsGrp2[2016] = 8;
arrItems2[2017] = "Upgrade Licence";
arrItemsGrp2[2017] = 8;
arrItems2[2018] = "Maintenance";
arrItemsGrp2[2018] = 8;

arrItems2[2019] = "New Licence";
arrItemsGrp2[2019] = 9;
arrItems2[2020] = "Maintenance";
arrItemsGrp2[2020] = 9;
<!-- End of Ventura -->


<!-- WordPerfect Office Standard -->
arrItems2[2021] = "New Licence";
arrItemsGrp2[2021] = 10;
arrItems2[2022] = "Upgrade Licence";
arrItemsGrp2[2022] = 10;
arrItems2[2023] = "Maintenance - 1 year";
arrItemsGrp2[2023] = 10;
arrItems2[2024] = "Maintenance - 2 years";
arrItemsGrp2[2024] = 10;

arrItems2[2025] = "New Licence";
arrItemsGrp2[2025] = 11;
arrItems2[2026] = "Maintenance - 1 year";
arrItemsGrp2[2026] = 11;
arrItems2[2027] = "Maintenance - 2 years";
arrItemsGrp2[2027] = 11;
<!-- End of WordPerfect Office Standard -->


<!-- WordPerfect Office Professional -->
arrItems2[2028] = "New Licence";
arrItemsGrp2[2028] = 12;
arrItems2[2029] = "Upgrade Licence";
arrItemsGrp2[2029] = 12;
arrItems2[2030] = "Maintenance - 1 year";
arrItemsGrp2[2030] = 12;
arrItems2[2031] = "Maintenance - 2 years";
arrItemsGrp2[2031] = 12;
<!-- End of WordPerfect Office Professional -->




function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "-- please select --" ;
  controlToPopulate.add(myEle) ;
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ )
    {
      if ( GroupArray[x] == control.value )
        {
          myEle = document.createElement("option") ;
          myEle.value = x ;
          myEle.text = ItemArray[x] ;
          controlToPopulate.add(myEle) ;
        }
    }
}
function funcProductExplain()
{
if(document.myChoices.firstChoice.options[0].selected == true)
    {
	productExplain.innerHTML = "";
	}
else if(document.myChoices.firstChoice.options[1].selected == true)
    {
	productExplain.innerHTML = "Corel Designer Explaination";
	}
else if(document.myChoices.firstChoice.options[2].selected == true)
    {
	productExplain.innerHTML = "CorelDraw Graphics Suite Explaination";
	}
else if(document.myChoices.firstChoice.options[3].selected == true)
    {
	productExplain.innerHTML = "Corel Grafigo Explaination";
	}
else if(document.myChoices.firstChoice.options[4].selected == true)
    {
	productExplain.innerHTML = "Corel Ventura Explaination";
	}
else if(document.myChoices.firstChoice.options[5].selected == true)
    {
	productExplain.innerHTML = "Paradox Standalone Explaination";
	}
else if(document.myChoices.firstChoice.options[6].selected == true)
    {
	productExplain.innerHTML = "Corel Painter Explaination";
	}
else if(document.myChoices.firstChoice.options[7].selected == true)
    {
	productExplain.innerHTML = "WordPerfect Office Standard Explaination";
	}
else if(document.myChoices.firstChoice.options[8].selected == true)
    {
	productExplain.innerHTML = "WordPerfect Office Professional Explaination";
	}
}
//  End -->
</script>
</head>

<body>
<form name="myChoices" method="post" action="corel_result.php">
                          <table width="100%" align="center">
                            <tr> 
                              <td width="40%"> <div align="right"> Product</div></TD>
                              <td width="5%"> <div align="center">:</div></TD>
                              <td> <SELECT id="firstChoice" name="firstChoice" onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1); funcProductExplain();">
                                  <option value=0 SELECTED>-- please select --</option>
                                  <option value=1>Corel Designer</option>
                                                                         <option value=2>CorelDraw Graphics Suite</option>
                                  <option value=3>Corel Grafigo</option>
                                  <option value=4>Corel Ventura</option>
                                  <option value=5>Paradox Standalone</option>
                                  <option value=6>Corel Painter</option>
                                  <option value=7>WordPerfect Office Standard</option>
                                  <option value=8>WordPerfect Office Professional</option>
                                </SELECT> </TD>
                            </TR>
							 <tr> 
                              <td width="40%"></TD>
                              <td width="5%"></TD>
                              <td><div id="productExplain"></div></TD>
                            </TR>
                            <TR> 
                              <TD><div align="right">Standard or Educational</div></TD>
                              <TD><div align="center">:</div></TD>
                              <TD> <SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
                                </SELECT></TD>
                            </TR>
                            <TR> 
                              <TD><div align="right">Licence Type</div></TD>
                              <TD><div align="center">:</div></TD>
                              <TD> <SELECT id=thirdChoice name=thirdChoice onchange="selectChange(this, myChoices.fourthChoice, arrItems3, arrItemsGrp3);">
                                </SELECT></TD>
                            </TR>
                            <TR> 
                              <TD><div align="right"></div></TD>
                              <TD><div align="center"></div></TD>
                              <TD> </TD>
                            </TR>
                            <TR> 
                              <TD><div align="right">Number of Licences Required</div></TD>
                              <TD><div align="center">:</div></TD>
                              <TD><INPUT TYPE=text SIZE=5 NAME=licence_numbers></TD>
                            </TR>
                            <TR> 
                              <TD>&nbsp;</TD>
                              <TD>&nbsp;</TD>
                              <TD><INPUT TYPE=submit VALUE="Get Quote"></TD>
                            </TR>
                          </TABLE>
                        </form>
</body>

Stewart
 
Upvote 0 Downvote
Add this in the same <td> that the first select is in:
Code: 
<div id="description"></div>

Add a description array at the top of the Javascript:
Code: 
arrItemDesc[0] = "Choose an Application";
arrItemDesc[1] = "Designer Description";
arrItemDesc[2] = "Graphic Sweet Description";
<!-- ... (make one for each choice in first dropdown -->

Add this function to Javascript:
Code: 
function showDesc(si) {
    var d = document.getElementById('description');
    d.innerHTML = arrItemDesc[si];
}

Call it from the onchange event...
Code: 
<select ... onchange="showDesc(this.selectedIndex);">

Note: there are multiple problems with your Javascript as it currently exists. In fact, it didn't even work for me in Firefox. I suggest you use a debugger (FF has one) to determine what's wrong with your code.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Thanks Stewart!
That's exactly what I'm lookin for!!

cLFlaVA - thanks.
I've checked it out in Firefox and I see what you mean.
Like I said - I know nothing about javascript. This code was already written.

When I have learnt a bit, I'll worry about the Firefox issue...

Thanks guys!
 
Upvote 0 Downvote
Agree, after posting my answer and looking at your answer, I did think yours was much better solution.
 
Upvote 0 Downvote
This is a classic example for using Javascript objects rather than multiple arrays:

var arrItems = new Array();

//<!-- Designer -->
arrItems[1] = {title:"Standard", grp: 1};
arrItems[2] = {title:"Educational", grp: 1};
//<!-- End of Designer -->

//<!-- CorelDraw Graphics Suite -->
arrItems[3] = {title:"Standard", grp: 2};
//<!-- End of CorelDraw Graphics Suite -->

//<!-- Grafigo -->
arrItems[4] = {title:"Standard", grp: 3};
//<!-- End of Grafigo -->

and so on. Then use dot notation to access the title or grp properties of each object.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
833
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
417
Daniel K
Daniel K
Marclem
  • Locked
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
412
Marclem
Marclem
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
804
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top