This forum is in READ-ONLY mode.
You can look around, but if you want to ask a new question, please use the new forum.
Home » development » Miscellaneous » How Do I Do An OnChange with a checkBox
How Do I Do An OnChange with a checkBox [message #98901] Tue, 11 May 2010 23:16 Go to next message
StanN
Messages: 26
Registered: November 2008
Junior Member
I have the following:

<tr>
<td><?php echo checkbox_tag('IsHot', 'IsHot', false) ?></td>
<th> Hot Request </th>
</tr>

And would like to open the following fields only after the above is clicked and remove them if the above is unchecked.

<tr>
<td colspan=2>
<?php
echo textarea_tag('HotList', $HotList, "size=25x10") ?>
</td>
</tr>

<tr>
<td>&nbsp;</td>
<th> Where is it</th>
<td><?php echo input_tag('HoldStage', $HoldStage, "size=12") ?></td>
</tr>

<tr>
<th> Disposition </th>
<td><?php $DispList = array (
'--Select--' => '--Select--',
'Discard' => 'Discard_and_Destory',
'Return' => 'Return_Here');
echo select_tag('Disp', options_for_select($DispList, $Disp));
?>
</td>
</tr>


Re: How Do I Do An OnChange with a checkBox [message #98914 is a reply to message #98901 ] Wed, 12 May 2010 10:16 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
If you're using jQuery, something like this:

$('#IsHot').click(function()
{
  $('.myrow').toggle();
});

You can make use of $(this).val() inside the event handler to determine the value of the checkbox. The docs on jQuery are excellent, so if you choose jQuery do be sure to read them.

You'll need to add class "myrow" to your table rows to toggle.


Remember Palestine
Re: How Do I Do An OnChange with a checkBox [message #98934 is a reply to message #98914 ] Wed, 12 May 2010 15:32 Go to previous messageGo to next message
StanN
Messages: 26
Registered: November 2008
Junior Member
Is there a way of doing it without jQuery. This is the first I have heard of such a thing.
Re: How Do I Do An OnChange with a checkBox [message #98940 is a reply to message #98901 ] Wed, 12 May 2010 17:25 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
jQuery is one of the best Javascript/AJAX libraries available. You should definitely be aware of it if you do web development, even if you prefer its competitors such as Prototype, MooTools, etc.

There is a way to do it just with raw Javascript, but I'd need to research it on the 'net. I'd suggest googling for "javascript show hide table row" and see what it comes up with.


Remember Palestine
Re: How Do I Do An OnChange with a checkBox [message #98961 is a reply to message #98901 ] Wed, 12 May 2010 20:23 Go to previous messageGo to next message
StanN
Messages: 26
Registered: November 2008
Junior Member
Wow that was sort of easy.

I stole this code and modified it:

http://www.aspcode.net/Javascript-hide/show-multiple-table-r ows.aspx

The only problem is it is the exact opposite of what I want. If the box is unchecked (the default) I do not want the extra rows. When it is checked I do want the extra rows.

What I have now displays the extra rows with the box unchecked and hides them when it is checked.

I have flipped everything I can find with no success. I am wondering is it possible to default tr.style.display to ''?
Re: How Do I Do An OnChange with a checkBox [message #98978 is a reply to message #98901 ] Thu, 13 May 2010 10:22 Go to previous messageGo to next message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
Generally if you want to hide something, set its display css to 'none' rather than an empty string. I suspect if you flip the ternary operator here, you'll get what you want:

tr.style.display = (bExpand ? '' : 'none');


Remember Palestine
Re: How Do I Do An OnChange with a checkBox [message #99005 is a reply to message #98901 ] Thu, 13 May 2010 15:43 Go to previous messageGo to next message
StanN
Messages: 26
Registered: November 2008
Junior Member
Thanks.

The key was where the row is defined I needed to initially set its style to none

<tr id="row2" style="display:none">

That way it would be not initially be displayed.

Halfer I do want to thank you for you help all your comments got me pointed in the right direction.

In the end it looks something like this.

<script type="text/javascript">

function toggleOff(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
tr.style.display = 'none';
}


function toggleOn(id)
{
var tr = document.getElementById(id);
if (tr==null) { return; }
tr.style.display = '';
}


function Toggle_IsHot()
{

var iP = document.init.IsHot.checked;

if (iP == true)
{
toggleOn('row1');
toggleOn('row2');
toggleOn('row3');
}
else
{
toggleOff('row1');
toggleOff('row2');
toggleOff('row3');
}
}

</script>


<tr id="trHot">
<td>
<span onclick="javascript:Toggle_IsHot();">
<?php echo checkbox_tag('IsHot', $IsHot, false) ?>
</td>
<th> Click if hot </th>
</tr>

<------ setting the style here makes is not show until toggled on ----->

<tr id="row2" style="display:none">
<th> A sometimes hidden header </th>
<td><?php echo textarea_tag('OptionalBox', $OptionalBox, size=25x10") ?></td>
</tr>

I like it better than what I had found because the displaying of the rows is more closely linked to the state of the check box.

I may need to use PHP so write the initial tr state if when I read from the DB that the box is already checked. But that is a bridge to be crossed later.

Thanks again for the help.

[Updated on: Thu, 13 May 2010 15:44]

Re: How Do I Do An OnChange with a checkBox [message #99014 is a reply to message #98901 ] Thu, 13 May 2010 18:24 Go to previous message
halfer  is currently offline halfer
Messages: 9535
Registered: January 2006
Location: West Midlands, UK
Faithful Member
No probs.

The other thing to ask is - are you using tables to layout your form? I have sometimes done that out of exasperation with cross-browser issues*, but these days the standards are respected by a greater proportion of users' browsers, and as such I would tend now to avoid table-based forms if I can.

* There was (is?) a view that forms are tabular devices, both in terms of html and real-world page layout, and as such may legitimately be rendered using html tables. However I don't think that perspective garnered much support from the internet community.


Remember Palestine
Previous Topic:How Do I Read if a checkBox is checked within java Script?
Next Topic:In search for 24/7 technical support for symfony and lamp stack
Goto Forum:
  

powered by FUDforum - copyright ©2001-2004 FUD Forum Bulletin Board Software