javascript coding problem

hosefo81 · November 30th, 2003, 06:09 AM

Please help me correct the code below. i know the error is in my javascript but i donno how to fix it.
i want the yearSalesStart, yearSalesEnd text box and view_by radio button be displayed when i clicked on the yearSales radio button is clicked and
monthSales text box and view_radio buttons be displayed when i clicked on the monthSales radio button.

<html>
<head>

<script language="javascript">
     function ToggleTextBoxDisplay()
     {

    if(yearSales == graph_by)
    {
           div1.style.visibility = "visible";
           div1.style.display = "block";
    }
    else if(monthSales == graph_by)
    {
       div2.style.visibility = "visible";
           div2.style.display = "block";
    }
       div3.style.visibility = "visible";
           div3.style.display = "block";
     }

</script>

</head>
<body>
<form method=POST action="selectedchoice.php">

<table border="0" width="100%" cellpadding="10">
<tr>
<td width="50%" valign="top">
<b>What would you prefer to view :? </b><br>
<input type="radio" name="graph_by" value="prodCat" >Product Number Per Category<br>
<input type="radio" name="graph_by" value="yearSales" onclick="ToggleTextBoxDisplay() ">Sales By Year<br>
<input type="radio" name="graph_by" value="monthSales" onclick="ToggleTextBoxDisplay()">Sales By Month<br>
</td>
</tr>

<tr>
<td>
<div id="div1" style="visibility:hidden;display:none"><br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp From <input type="text" name="yearSalesStart" size="7" > To <input type="text" name="yearSalesEnd" size="7" > <br>
</div>

<div id="div2" style="visibility:hidden;display:none"><br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Year <input type="text" name="monthSalesYear" size="7" > <br><br>
</div>

<div id="div3" style="visibility:hidden;display:none"><br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" name="view_by" value="category">View Category<br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" name="view_by" value="specategory">View Specified Category<br>
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input type="radio" name="view_by" value="speproduct" >View Specified Product<br><br>
</div>
</td>
</tr>

<tr>
    <td>&nbsp </td>
    <td align="center"><input type="submit" size="10" value="Submit "> <input type="reset" size="10" value="Reset "> </td>
</tr>
</table>

</form>
</body>
</html>

joefawcett · December 1st, 2003, 05:39 AM

I would simplify a little, there is no need to worry about display and visibility. If you want to reserve portions of the page and hide and show items use visibility, if you want the area to collapse when not shown use display. I'll show the radio buttons and function to toggle changes using style.display:

Code:

<input type="radio" name="graph_by"  value="yearSales" onclick="ToggleTextBoxDisplay(this.value) ">Sales By Year<br>
<input type="radio" name="graph_by"  value="monthSales" onclick="ToggleTextBoxDisplay(this.value)">Sales By Month<br>

function ToggleTextBoxDisplay(Period)
{
  var divYear = document.getElementById("div1");
  var divMonth = document.getElementById("div2");
  if (Period == "yearSales")
  {
    divYear.style.display = "block";
    divMonth.style.display = "none";
  }
  else
  {
    divYear.style.display = "none";
    divMonth.style.display = "block";
  }
}

--

Joe

hosefo81 · December 3rd, 2003, 06:33 AM

Thanks! i've solve half of the problem. But....
I want the yearSalesStart, yearSalesEnd textbox and view_by radio button be displayed only when the user clicked the Sales by Year radio button.
While the monthSalesYear textbox and view_by radio button be displayed only when the user clicked the Sales by Month radio button.
My problem is :when i clicked the Sales by Year radio button and then i change to clicked the Sales by Month radio button, the previous two textbox that displayed for Sales by Year is still displayed and the situation also happen when i clicked the Sales by Month radio followed by Sales by Year.
Could someone please correct my code so that only the right textbox and radio button are displayed when the user change their option?

joefawcett · December 4th, 2003, 04:56 AM

I thought I had.

--

Joe