homepage Welcome to WebmasterWorld Guest from 54.237.184.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

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 search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved