Making a div appear and disappear

[tonybabb]

Good morning,

I'm trying to make a div appear/ disappear based on which radio button a user clicks. Initially the div is hidden, when the user clicks "Yes" the div correctly appears but when the user clicks "No" it remains visible. I added a couple of alerts and it seems that the radio button value is always seen as "Yes".

What I'm trying to do is when the user answers "yes" to the first question, then the second question should appear, but if they change their mind and then click "No" the second question should disappear.

Here's part of the page:


<p>Will you be selling Products and/ or services during the rally?</p>
<input type="radio" id="selly" name="sell" value="yes" /> <label for="selly">Yes</label><br />
<input type="radio" id="selln" name="sell" value="no" /> <label for="selln">No</label>

<div id="haveBl" hidden="true">
<p>Do you already have a City of Hollister Business License (valid during the rally)?</p>
<p>
<label>
<input type="radio" name="havebl" value="Yes" id="havebly" />
Yes</label>
<br />
<label>
<input type="radio" name="havebl" value="No" id="havebln" />
No</label>
<br />
</p>
</div> <!-- /haveBl -->

and here's the js


<script>
$('input[name=sell]').click(function() {
if (sell = "yes")
{
$('#haveBl').show();
alert ("selly = " + sell);
}
else
{
$('#haveBl').hide();
alert ("selln = " + sell);
};
});
</script>

The full page can be seen here http://www.hollisterairshow.com/rally

Thanks for any direction you can give. The learning curve on js seems quite steep - at least where I am.....

Tony

[jscheuer1]

<script>
$('input[name=sell]').click(function() {
if (this.value === "yes")
{
$('#haveBl').show();
alert ("selly = " + this.value);
}
else
{
$('#haveBl').hide();
alert ("selln = " + this.value);
};
});
</script>

Of course, you don't need those alerts then. There are various ways. If you want to get real cute, you can use the value as the name of the action to take:


<p>Will you be selling Products and/ or services during the rally?</p>
<input type="radio" id="selly" name="sell" value="show"> <label for="selly">Yes</label><br>
<input type="radio" id="selln" name="sell" value="hide"> <label for="selln">No</label>

<script>
$('input[name=sell]').click(function() {
$('#haveBl')[this.value]();
});
</script>

But if the input is submitted later as part of a form or AJAX call (neither of which it looks like right now, but I'm not sure), the sell name will have that (show or hide) value. But that might not be a bad thing.

[tonybabb]

Hi John,

Thank you again, that worked perfectly. I had thought about using the "cute" approach but couldn't figure out how to do it. I'm sure I'll use that in the future.

Regards,

Tony