Show Div based on default radio button selected using javascript -
Show Div based on default radio button selected using javascript -
i have form based on 2 radio buttons. want show div if 1 radio button selected on page load. if value 'yes' saved on form on each page load div should shown. if no value saved on form div should not visible.
p.s. have implemented functionality on div show , hide on radio button selection javascript.
here code:- first section of page.
<script> function yesnoinscheck() { if (document.getelementbyid('yesinscheck').checked) { document.getelementbyid('showexplain').style.display = 'block'; style.opacity = 0; settimeout(fade, 40); } else document.getelementbyid('showexplain').style.display = 'none'; style.opacity = 1; settimeout(fade, 40); } </script> <tr> <td> <input type="radio" class="had-insurance" onchange="javascript:yesnoinscheck();" id="yesinscheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1') echo 'checked'?> checked=""><span class="radio-text">yes</span> <input type="radio" class="had-insurance" onchange="javascript:yesnoinscheck();" id="noinscheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">no</span> </td> </tr> <tr id="showexplain" style="display: none;"></tr> section section of page:-
<script type="text/javascript"> function yesnocheck() { if (document.getelementbyid('yescheck').checked) { document.getelementbyid('boxphysical').style.display = 'block'; } else document.getelementbyid('boxphysical').style.display = 'none'; } </script> <td> <input type="radio" class="physical-damage" onclick="javascript:yesnocheck();" id="yescheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?> checked=""><span class="radio-text">yes</span> <input type="radio" class="physical-damage" onclick="javascript:yesnocheck();" id="nocheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">no</span> </td> <tr id="boxphysical" style="display:none;" ></tr>
try this:edited
<script> function atloadtime(){ if (document.getelementbyid('yesinscheck').checked) { document.getelementbyid('showexplain').style.display = 'block'; } if (document.getelementbyid('yescheck').checked) { document.getelementbyid('boxphysical').style.display = 'block'; } } function yesnoinscheck() { if (document.getelementbyid('yesinscheck').checked) { document.getelementbyid('showexplain').style.display = 'block'; // style.opacity = 0; //settimeout(fade, 40); } else document.getelementbyid('showexplain').style.display = 'none'; // style.opacity = 1; //settimeout(fade, 40); } function yesnocheck() { if (document.getelementbyid('yescheck').checked) { document.getelementbyid('boxphysical').style.display = 'block'; // style.opacity = 0; //settimeout(fade, 40); } else document.getelementbyid('boxphysical').style.display = 'none'; // style.opacity = 1; //settimeout(fade, 40); } </script> <body onload="javascript:atloadtime();"> <input type="radio" class="had-insurance" onchange="javascript:yesnoinscheck();" id="yesinscheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1')echo 'checked'?> ><span class="radio-text">yes</span> <input type="radio" class="had-insurance" onchange="javascript:yesnoinscheck();" id="noinscheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">no</span> <input type="radio" class="physical-damage" onclick="javascript:yesnocheck();" id="yescheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?>><span class="radio-text">yes</span> <input type="radio" class="physical-damage" onclick="javascript:yesnocheck();" id="nocheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">no</span> <div id="showexplain" style="display: none;">hello there</div> <div id="boxphysical" style="display: none;">second div............</div> </body> this should solve problem.if using tr first create table tag.
javascript
Comments
Post a Comment