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>

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

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.

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.