How to write an event for already selected radio button? - php

Question

My code snippet for radio buttons is -
<input type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>
<table id="emailTable"><tr><td>...</td></tr></table>
The value of isPush will be 0 or 1. So one of my radio buttons will always be selected. And selecting either of the radio buttons initially is not in my hands.
Now, For the table, I want to set display: none when when second radio button is selected and set display: visible when first radio button is selected.
So which event should I put? I certainly can't put onclick.

Answer 1

You need to check the selected radio onload, as well as onchange. This means the table will be hidden to start with, if No is selected by default.
jsFiddle Demo
function checkRadio()
{
var tbl = document.getElementById("emailTable");
if(document.getElementById("isPushYes").checked)
{
tbl.style.display = "";
}
else
{
tbl.style.display = "none";
}
}
window.onload = function()
{
document.getElementById("isPushYes").onchange = checkRadio;
document.getElementById("isPushNo").onchange = checkRadio;
checkRadio();
}​
Another option is without the onload event, you set the display with PHP:
<table id="emailTable" <?php if(!$isPush) echo 'style="display:none"'; ?>><tr><td>...</td></tr></table>

Answer 2

i think this is what you want:
<label><input type="radio" name="myradio" value="1" checked="true" onchange="hideActive(this.name);" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" onchange="hideActive(this.name);" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" onchange="hideActive(this.name);" /> radio 3</label>
<script type="text/javascript">
function hideActive(radioGroupName) {
var all = document.getElementsByName(radioGroupName);
for(var n = 0; n < all.length; n++) {
if(true === all[n].checked) {
all[n].setAttribute('style', 'display: none;');
}
else {
all[n].removeAttribute('style');
}
}
}
hideActive('myradio');
</script>
if you support jquery try this
<label><input type="radio" name="myradio" value="1" checked="true" /> radio 1</label>
<label><input type="radio" name="myradio" value="2" /> radio 2</label>
<label><input type="radio" name="myradio" value="3" /> radio 3</label>
<script type="text/javascript">
jQuery(function() {
var all = jQuery('input[name=myradio]');
var change = function() {
all
.show()
.filter(':checked').hide();
};
all.change(function(){
change();
});
//call init
change();
});
</script>

Answer 3

You want to perform some action when the radio button is checked by the user, so you'll want to bind a handler for the onchange event.

Answer 4

you should write a javascript function that changes the display attribute and then call it in 2 places.
1- When the document loads.
window.onload = function () { javascript_function(); }
if you have JQuery you can do this:
$(document).ready(function(){
javascript_function();
)};
2- When there's a change in the radio button.
Either set a onchange="javascript_function" or use JQuery.
$(document).ready(function(){
javascript_function();
$("#radio_id").change(javascript_function());
)};

Answer 5

Its a test. Change it as like as you want
<script type="text/javascript">
function fnc(myid,otherid)
{
if(document.getElementById(myid).checked)
{document.getElementById(otherid).disabled='disabled';}
}
</script>
<input type="radio" name="isPush" id="isPushYes" onchange="fnc(this.id,'isPushNo')">
<input type="radio" name="isPush" id="isPushNo" onchange="fnc(this.id,'isPushYes')">

Answer 6

Onchange, for example (in JQuery):
$('input[name="isPush"]').change(function() {
// your code
});
Or:
<input onchange="myFunction();" type="radio" name="isPush" id="isPushYes" <? if($isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "Yes"?></input>
<input onchange="myFunction();" type="radio" name="isPush" id="isPushNo" <? if(!$isPush) {?>checked="checked"<?}?> value="<?= $isPush;?>" > <? echo "No"?></input>

Answer 7

I personally would look at onChange, this will catch occasions where the selected value changes. If doing this in jquery I'd do something like:
$('input[type=radio][name=isPush]').bind('change', function(e){
console.log('We had a change');
});
Note that if the item is dynamically added at all you should change bind to live.

Answer 8

here is the fidddle..
http://jsfiddle.net/vfuV5/2/
for example:
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
$("input[name='isPush']").change(function() {
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
});
OR
make a function
function checkRadioValue()
{
if($('input:radio[name="isPush"]:checked').val() == 'Yes') // used yes u can use 1 here
{
$('#emailTable').show();
}else{
$('#emailTable').hide();
}
}
Call this function on document.ready and onchange function
$(document).ready(function(){
checkRadioValue();
$("input[name='isPush']").change(function() {
checkRadioValue();
});
})