0

I am trying to display/hide different div tags when a checkbox is checked and when a California is selected as a drop-down value. I have it working when the check-box is selected and choosing the drop-down value, but not when the drop-down is selected and clicking the check-box.

I hope this is an easy fix and my newbie-ness is at fault.

<script type="text/javascript" language="JavaScript"><!--
function show(obj) 
{
	sel = obj.options[obj.selectedIndex].value;
	if(sel=='CA' && document.form1.same.checked == true)
	{
		document.getElementById('CA-sales-tax').style.display = 'block';
		document.getElementById('CA-total').style.display = 'block';
		document.getElementById('normal-total').style.display = 'none';
	}
	else
	{
		document.getElementById('CA-sales-tax').style.display = 'none';
		document.getElementById('CA-total').style.display = 'none';
		document.getElementById('normal-total').style.display = 'block';
	}
}
function show2() 
{
	if(document.form1.state.selectedIndex == 'CA')
	{
		document.getElementById('CA-sales-tax').style.display = 'block';
		document.getElementById('CA-total').style.display = 'block';
		document.getElementById('normal-total').style.display = 'none';
	}
	else
	{
		document.getElementById('CA-sales-tax').style.display = 'none';
		document.getElementById('CA-total').style.display = 'none';
		document.getElementById('normal-total').style.display = 'block';
	}
}
//--></script>

<form name="form1" method="post" action="/cart/" enctype="multipart/form-data">
<select name="state" onchange="show(this)">
<option value="">Select US State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
<br>
<br>
<input name="same" type="checkbox" value="1" onSelect="show2()"> same as above
</form>
<br>
<br>
<div id="CA-sales-tax" style="display: none;">ca sales tax</div>
<div id="CA-total" style="display: none;">ca total</div>
<div id="normal-total" style="display: block;">standard total</div>
2
Contributors
3
Replies
4
Views
8 Years
Discussion Span
Last Post by h2onet
0

From the show2() function, on the first line of if ( ) statement — simply change the condition into this:

if ( document.form1.state.selectedIndex == 1 ) {
// No need to edit all codes that follows
0

The fix does not seem to work for me. It looks like it might work if any value is selected, but it does not.

I do need to clarify that I need the validation to occur only when the drop-down value of "CA" is selected.

0

Solved! Thanks to Essential for making me think "Is the script even running?" On the checkbox field, I changed OnSelect to OnClick and changed the if statement to if(document.form1.state.value == 'CA' and voila, it worked. I then went one step further and thought "why do I even need the first script "show(this)". I changed the "show2" to the following and now i can call the same script from both fields.

full new solved code below:

<script type="text/javascript" language="JavaScript"><!--
function show2() 
{
	if(document.form1.state.value == 'CA' && document.form1.same.checked == true)
	{
		document.getElementById('CA-sales-tax').style.display = 'block';
		document.getElementById('CA-total').style.display = 'block';
		document.getElementById('normal-total').style.display = 'none';
	}
	else
	{
		document.getElementById('CA-sales-tax').style.display = 'none';
		document.getElementById('CA-total').style.display = 'none';
		document.getElementById('normal-total').style.display = 'block';
	}
}
//--></script>

<form name="form1" method="post" action="/cart/" enctype="multipart/form-data">
<select name="state" onchange="show2()">
<option value="">Select US State</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
<br>
<br>
<input name="same" type="checkbox" value="1" onSelect="show2()"> same as above
</form>
<br>
<br>
<div id="CA-sales-tax" style="display: none;">ca sales tax</div>
<div id="CA-total" style="display: none;">ca total</div>
<div id="normal-total" style="display: block;">standard total</div>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.