Hide Text boc and select list with radio button JavaScript and AJAX forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 54.234.42.16
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Subscribe and Support WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX

Forum Library : Charter : Moderators: whoisgregg
JavaScript and AJAX Forum

Hide Text boc and select list with radio button

garwil

msg:4544672 7:49 pm on Feb 11, 2013 (gmt 0)

Hi
AM hoping someone can point me in the right direction here.

I have a form where users can add additional charges for a room hire. If they click a radio button where the question is "Minimum Charge".. YES or No (radio buttons) then I am trying to get one text box and one select list to show if the user clicks "Yes"..
What I have now is that when teh form loads the "No" button is checked which is what I want, The issue is that both the text box and select lsit are alos displayed. If I click YES then nothing happens. If I click NO again then the text box and select list disapears but the labels remain visible. I am trying to have these two items NOT appear on form load and only appear if YES is clicked. Can anyone help ou? Been tryign various permutations of DIVS etc but not getting anywhere..
My Javascript

<SCRIPT LANGUAGE="JavaScript">

function showhideminimum(chk)
{
if(chk==1)
{
document.getElementById('min_chrg').style.display="block";
document.getElementById('min_chrg_due').style.display="block";

}else if(chk==0){
document.getElementById('min_chrg').style.display="none";
document.getElementById('min_chrg_due').style.display="none";
}
}
// End -->
</script>

My form (affected code between ###########################################

<form name="form1" method="post" action="addcharge.php?coid=<?php echo $coid;?>" onSubmit="return checkFields1();">
  <table width="493" bgcolor="#FAFAFA" border="0" cellspacing="5" cellpadding="0" style="border: 1px solid #BBBBBB; <?php if( isset($_POST['step']) ) echo "display: none;"; ?>">
  <tr>
   <td><b>Charge Name:</b></td>
<input type="hidden" name="step" value="1">
   <td colspan="2">
   <input type="text" name="name" value="<?php echo $minchrg['name']; ?>">
   <input type="hidden" name="ruleid" value="<?php echo $ref; ?>"></td>
  </tr>
  <tr> 
   <td width="140"><b>Mandatory?</b></td>

   <td colspan="2"><select name="mandatory">
   <option value="" show="none">Select</option>
   <option value="1"<?php if($minchrg['mandatory'] == "1") echo "selected"; ?>>Yes</option>
   <option value="2"<?php if($minchrg['mandatory'] == "2") echo "selected"; ?>>No</option>
   </select></td>
  </tr>
  <tr>
   <td><b>Recurance?</b></td>
   <td colspan="2"><select name="recurance">
   <option value="" show="none">Select</option>
   <option value="1"<?php if($minchrg['recurance'] == "1") echo "selected"; ?>>Once Off</option>
   <option value="2"<?php if($minchrg['recurance'] == "2") echo "selected"; ?>>Daily</option>
   </select></td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td colspan="2"><input type="hidden" name="company_id2" value="<?php echo $coid; ?>"></td>
  </tr>
  <tr>
###################################################
  <td><b>Minimum Required?</b></td>
  <td>
  <?php 
if($minchrg['is_min_chrg'] =="1")
{
$chk1='checked="checked"';
$disp='block';
}else{
$chk1='';
}

?>
  <input name="button[]" id="button[0]" type="radio" value="0" <?php echo $chk1; ?> onClick="showhideminimum(1);">Yes</td>
  <td>
    <?php 
if($minchrg['is_min_chrg']=="0" or !isset($minchrg['is_min_chrg']))
{
$chk0='checked="checked"';
$disp='none';
}else{
$chk0='';
}

?>

  <input name="button[]" id="button[1]" type="radio"value="0" onClick="showhideminimum(0);" <?php echo $chk0; ?>>No</td>
  
  </tr>
 <div id="minimum" style="display:<?php echo $disp; ?>;" >
   <td><b>Cost?</b></td>
   <td colspan="2" align="left"><input type="text" id="min_chrg" name="min_chrg" value="<?php echo $min_chrg; ?>" onChange="showhideminimum(this.value,1);">
   </td>
   <td width="37"></div>
  <tr>
<td><b>When is it due?</b></td>
   <td colspan="2" align="left">
<select name="min_chrg_due" id="min_chrg_due" >
   <option value="" >Select</option>
   <option value="1"<?php if($minchrg['min_chrg_due'] == "1") echo "selected"; ?>>At Booking</option>
   <option value="2"<?php if($minchrg['min_chrg_due'] == "2") echo "selected"; ?>>After Booking / Confirmation</option>
   <option value="3"<?php if($minchrg['min_chrg_due'] == "3") echo "selected"; ?>>Before Arrival</option>
   </select>
   </td>
   </div>
###########################################
  <tr> 
 <td>&nbsp;</td>
   <td colspan="2" align="right"><div align="left">
   <input type="button" name="Cancel" id="Cancel3" value="Cancel" onClick="window.close(); opener.location.reload(true)">
   <input type="submit" name="Submit" value="Next >>"> 
   </div>
  </table>
  </form>
<?php
}
?>  
  <form name="step2" action="addcharge.php?coid=<?php $_SESSION['coid'];?>" method="post" onSubmit="return checkFields2();">
  <table width="504" border="0" cellspacing="5" cellpadding="0" style="border: 1px solid #BBBBBB; <?php if( !isset($_POST['step']) || $_POST['step'] != '1' ) echo "display: none;"; ?>">
  <tr> 
   
 <td width="173"><b>Amount:</b></td>
  <td width="278" align="right"><div align="left">
   <p>
   <input type="text" name="value" value="<?php echo $value; ?>">
   <input type="hidden" name="name" value="<?php echo $name; ?>">
   <input type="hidden" name="mandatory" value="<?php echo $mandatory; ?>">
   <input type="hidden" name="recurance" value="<?php echo $recurance; ?>">
   <input type="hidden" name="min_chrg" value="<?php echo $min_chrg; ?>">
   <input type="hidden" name="company_id" value="<?php echo $coid; ?>">
   <input type="hidden" name="stid" value="<?php echo $stid; ?>">
   <input type="text" name="is_min_chrg" value="<?php echo $is_min_chrg; ?>">
   <input type="hidden" name="min_chrg_due" value="<?php echo $min_chrg_due; ?>">
   <input type="hidden" name="step" value="2">
   </p>
   </div></td>
  </tr>
  <tr>
   <td><b>Basis:</b></td>
   <td align="right"><div align="left">
   <select name="basis">
   <option value="" show="none">Select</option>
   <option value="%">% of Accommodation Total</option>
   <option value="$">Actual Value</option>
   </select>
   </div></td>
  </tr>
  
  <tr>
   <td>&nbsp;</td>
   <td align="right"><div align="left">
   <input type="button" name="Cancel2" id="Cancel" value="Cancel" onClick="window.close(); opener.location.reload(true)">
   <input type="submit" name="Submit2" value="Add Charge">
   </div></td>
  </tr>
  </table>
  </form></td>
 </tr>
 </table></td>
 <td bgcolor="#FFFFFF" align="right" background="../images/admin_14.gif" style="background-position: right; background-repeat: repeat-y;"></td>
 </tr>
 <tr> 
 <td><img src="../images/admin_21.gif" width="32" height="33"></td>
 <td bgcolor="#FFFFFF" background="../images/admin_23.gif" style="background-position: bottom; background-repeat: repeat-x;"></td>
 <td><img src="../images/admin_20.gif" width="32" height="33"></td>
 </tr>
</table>

<div align="left"></div>
</body>
</html>

daveVk

msg:4544734

10:24 pm on Feb 11, 2013 (gmt 0)

<input name="button[]" id="button[0]" type="radio" value="1" <?php echo $chk1; ?> onClick="showhideminimum(this.value);">Yes</td>

and

<input name="button[]" id="button[1]" type="radio" value="0" onClick="showhideminimum(this.value);" <?php echo $chk0; ?>>No</td>

the 3rd call to showhideminimum not required ?

garwil

msg:4544834

6:21 am on Feb 12, 2013 (gmt 0)

Thanks daveVk for the reply...
I am having the same response with the changes you reccommend. Page opens with "No" checked and the text box and select list visible. Clecking "YES" produces no response but clicking "No" again hides just the text box and select list but leaves the labels visible..
The third call is my error :) Is one of the items I was trying and never removed before posting the code. Unfortunately removing it did not make any impact. Is probably such a small thing I know I am missing.. been at it for a solid day and just cant get the hang of it...

daveVk

msg:4544862

9:57 am on Feb 12, 2013 (gmt 0)

You have two inputs with name="min_chrg", possible problem.

Clean up and debug to showhideminimum

function showhideminimum(chk) {
var mc = document.getElementById('min_chrg');
var mcd = document.getElementById('min_chrg_due');
if(chk==="1") { // chk is string
alert('chk 1 - from ' + mc.style.display + ',' + mcd.style.display + ' to default' );
mc.style.display=""; // set back to default
mcd.style.display="";
}else{ // no need for second if
alert('chk 0 - from ' + mc.style.display + ',' + mcd.style.display + ' to none' );
mc.style.display="none";
mcd.style.display="none";
}
}

garwil

msg:4545182

6:57 am on Feb 13, 2013 (gmt 0)

Thanks daveVk
I got it all sorted. There were in fact two forms on my page and this is where things were going awry. I combined the two forms into one and now all works hunky-dory.
Thanks again for your time...

Global Options:

top

home

open messages

active posts

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

JavaScript and AJAX Forum