User12345
Reputation: 325
enable/disable textbox on click/unclick of radio button
I have a radio button named "CUSTOM". Upon clicking this radio button, I'd like the 2 textboxes next to it to change from "readonly to editable & then the date format of "yyyy/mm/dd" to be displayed inside the textboxes. I'm trying to achieve this by calling a function eb_tb &. Upn clicking any other radio button other than "CUSTOM", I'd like the textboxes to clear up & go readonly which I'm trying to do with dib_tb function. Neither of these seem to work unfortunately.
thisFile.php refers to the filename that the current code resides in. I'm referring to the same file to load the div which is hidden when the page loads.
Here's my code. Could someone please help me spot my mistake?
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="css/revised.css"-->
<link rel="stylesheet" type="text/css" href="css/dashboard.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function setDivProps() {
$('#resultblock').height(594).css({
cursor: "auto",
backgroundColor: "#A69A74",
// backgroundColor: "#FFFFFF",
marginLeft: "5%",
marginTop: "5%",
width: "88%",
height: "75%",
borderRadius: "25px",
border: "2px solid black",
// background: "url(image/divpic.jpg)"
});
};
function radio_check_enable_custom_date_range_text_box() {
if (document.getElementById('hd_radio_1').checked) {
document.getElementById('custom_date_range_id_1').removeAttribute('readonly');
document.getElementById('custom_date_range_id_2').removeAttribute('readonly');
document.getElementById('custom_date_range_id_1').value = 'yyyy-mm-dd';
document.getElementById('custom_date_range_id_2').value = 'yyyy-mm-dd';
}
}
;
function radio_check_disable_custom_date_range_text_box() {
document.getElementById('hd_radio_1').checked == false;
if (document.getElementById('hd_radio_1').checked === false) {
document.getElementById('custom_date_range_id_1').value = '';
document.getElementById('custom_date_range_id_2').value = '';
document.getElementById('custom_date_range_id_1').setAttribute('readonly', true);
document.getElementById('custom_date_range_id_2').setAttribute('readonly', true);
}
}
;
$(document).ready(function(){
$('#cssmenu li').click(function(){
$("#cssmenu li").removeClass("active");
$(this).addClass("active");
});
$("#page1").click(function(){
setDivProps();
// $(this).css("background-color","black");
$('#resultblock').load('thisFile.php #form_1');
});
$("#page2").click(function(){
setDivProps();
$('#resultblock').load('thisFile.php #form_2');
});
$("#page3").click(function(){
setDivProps();
$('#resultblock').load('thisFile.php #form_3');
});
});
</script>
<title>DEMO</title>
</head>
<body>
<div>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY DEMO</h1>
</div>
</header>
<div id='cssmenu'>
<ul class="uinav">
<li class='active'><a id="home1" href='#' ><span>OPTION-1</span></a></li>
<li><a id="page1" href="#"><span>OPTION-2</span></a></li>
<li><a id="page2" href="#"><span>TOPTION-3</span></a></li>
<li><a id="page3" href="#"><span>OPTION-4</span></a></li>
</ul>
</div>
<div id="div_id_1" style="display: none;">
<form method="post" action="" id='form_1'>
<table id="tbl_format_1">
<tr bgcolor="#8F4A11">
<td colspan="3" id="table_f_1">
<b> TIMELINE </b>
</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><td></td></tr>
<tr>
<td colspan=3>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='bubble1' value= 'week' onclick="radio_check_disable_custom_date_range_text_box()"> WEEK </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='bubble1' value= 'fortnight' onclick="radio_check_disable_custom_date_range_text_box()"> FORTNIGHT </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd3" Name ='bubble1' value= 'month' onclick="radio_check_disable_custom_date_range_text_box()"> MONTH </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd4" Name ='bubble1' value= 'three_month' onclick="radio_check_disable_custom_date_range_text_box()"> 1 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd5" Name ='bubble1' value= 'six_month' onclick="radio_check_disable_custom_date_range_text_box()"> 2 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd6" Name ='bubble1' value= 'nine_month' onclick="radio_check_disable_custom_date_range_text_box()"> 3 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd7" Name ='bubble1' value= 'year' onclick="radio_check_disable_custom_date_range_text_box()"> YEAR </INPUT>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<INPUT TYPE = 'Radio' class="radio_btn" Name ='bubble1' value='custom' id="hd_radio_1" onclick="radio_check_enable_custom_date_range_text_box()"> CUSTOM     =>     START DATE </INPUT>
   <textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea>     END DATE
   <textarea class="text_box" id="custom_date_range_id_2" readonly> </textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="resultblock"> </div>
</body>
<html>
Upvotes: 0
Views: 1730
Answers (3)
User12345
Reputation: 325
Here's the different ways I managed to work out this.
SOLUTION - 1
http://forums.asp.net/t/1600445.aspx?To+Hide+multiple+items+having+same+ID+using+Javascript
function hideAll(ctrlId)
{
var Ctrls = document.all(ctrlId);
for (var i = 0; i<Ctrls.items.length; i++)
{
var Ctrl = Ctrls.items(i);
Ctrl.style.display = "none";
}
}
SOLUTION - 2
Hiding elements with a specified id
UPDATE:
Well, if you need to hide a set of divs I usually add at all of them a class like .element-to-hide:
<div id="asd" class="element-to-hide">...
<div id="lol" class="element-to-hide">...
<div id="foo" class="element-to-hide">...
Ant after just a touch of jQuery:
$('.element-to-hide').each(function(){
$(this).hide();
});
SOLUTION -3
I used this approach as I learned that creation of duplicate IDs on the same page isn't a good idea.
Instead of using the "hidden div approach", I moved the contents of the hidden div to a new PHP file. This way, when I load the contents via
Contents of testhiddenblockconts.php
<div id="div_id_1" style="display: none;">
<form method="post" action="" id='form_1'>
<table id="tbl_format_1">
<tr bgcolor="#8F4A11">
<td colspan="3" id="table_f_1">
<b> TIMELINE </b>
</td>
</tr>
<tr>
<td colspan=3>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='bubble1' value= 'week' onclick="radio_check_disable_custom_date_range_text_box()"> WEEK </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='bubble1' value= 'fortnight' onclick="radio_check_disable_custom_date_range_text_box()"> FORTNIGHT </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd3" Name ='bubble1' value= 'month' onclick="radio_check_disable_custom_date_range_text_box()"> MONTH </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd4" Name ='bubble1' value= 'three_month' onclick="radio_check_disable_custom_date_range_text_box()"> 1 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd5" Name ='bubble1' value= 'six_month' onclick="radio_check_disable_custom_date_range_text_box()"> 2 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd6" Name ='bubble1' value= 'nine_month' onclick="radio_check_disable_custom_date_range_text_box()"> 3 - QUARTER </INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd7" Name ='bubble1' value= 'year' onclick="radio_check_disable_custom_date_range_text_box()"> YEAR </INPUT>
</td>
</tr>
<tr><td></td></tr>
<tr>
<td>
<INPUT TYPE = 'Radio' class="radio_btn" Name ='bubble1' value='custom' id="hd_radio_1" onclick="radio_check_enable_custom_date_range_text_box()"> CUSTOM     =>     START DATE </INPUT>
   <textarea class="text_box" id="custom_date_range_id_1" readonly> </textarea>     END DATE
   <textarea class="text_box" id="custom_date_range_id_2" readonly> </textarea>
</td>
</tr>
</table>
</form>
</div>
The code in "thisFile.php" now looks as below
$("#page1").click(function(){
setDivProps();
// $(this).css("background-color","black");
$('#resultblock').load('testhiddenblockconts.php #form_1');
});
Hope this helps others in the same situation as I was in.
Upvotes: 0
aich.pom
Reputation: 183
Write your code like this :
$(document).ready(function() {
$('#cdr1').hide();
$('#cdr1').hide();
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="opt1"){
$('#cdr1').show();
$('#cdr2').hide();
}else if($(this).attr("value")=="opt2"){
$('#cdr2').show();
$('#cdr1').hide();
}
}
Upvotes: 0
Joy Biswas
Reputation: 6527
On click of other radios you have to uncheck #radio1 Here try this snippet
added document.getElementById('radio_1').checked = false; in function dib_tb()
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="css/revised.css"-->
<link rel="stylesheet" type="text/css" href="css/myCustom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function setDivProps() {
$('#resultblock').height(300).css({
cursor: "auto",
backgroundColor: "#FFFFFF",
marginLeft: "5%",
marginTop: "5%",
width: "90%",
height: "90%",
borderRadius: "2px",
border: "2px solid black",
});
};
function eb_tb() {
if (document.getElementById('radio_1').checked === true) {
document.getElementById('cdr1').removeAttribute('readonly');
document.getElementById('cdr2').removeAttribute('readonly');
document.getElementById('cdr1').value = 'yyyy-mm-dd';
document.getElementById('cdr2').value = 'yyyy-mm-dd';
}
}
;
function dib_tb() {
document.getElementById('radio_1').checked = false;
if (document.getElementById('radio_1').checked === false) {
document.getElementById('cdr1').value = '';
document.getElementById('cdr2').value = '';
//document.getElementById('custom_date_range_id').style.display='none';
document.getElementById('cdr1').setAttribute('readonly', true);
document.getElementById('cdr2').setAttribute('readonly', true);
}
}
;
$(document).ready(function(){
$('#cssmenu li').click(function(){
$("#cssmenu li").removeClass("active");
$(this).addClass("active");
});
$("#page1").click(function(){
setDivProps();
// $(this).css("background-color","black");
$('#resultblock').load('thisPage.php #form_id_1');
});
});
</script>
</head>
<body>
<div>
<header class="site-header-wrap">
<div class="site-header">
<h1>DEMO</h1>
</div>
</header>
<div id='cssStyle'>
<ul>
<li><a id="page1" href="#"><span>B</span></a></li>
</ul>
</div>
<div style="">
<form method="post" action="" id='form_id_1'>
<table >
<tr>
<td>
<b>TIMELINE </b>
</td>
</tr>
<tr>
<td colspan=4>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd1" Name ='optname1' value= 'opt1' onclick="dib_tb()"> Option-1</INPUT>
<INPUT TYPE = 'Radio' class="radio_btn" id="rd2" Name ='optname2' value= 'opt2' onclick="dib_tb()"> Option-2</INPUT>
</td>
</tr>
<tr>
<td>
<INPUT TYPE = 'Radio' class="radio_btn" Name ='radio_1_class1' value= 'custom' id="radio_1" onclick="eb_tb()"> CUSTOM => START </INPUT>
   <textarea class="text_box" id="cdr1" readonly> </textarea> END
   <textarea class="text_box" id="cdr2" readonly> </textarea>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="resultblock"> </div>
</body>
<html>Upvotes: 2
Related Questions
- Enable and disable text box on radio button selection
- Enable/disable text input when a different radio input is clicked
- How do I enable/disable a textbox when a radio button is clicked using javascript?
- How to enable textbox when one of the radio button is clicked
- disable/able textbox onclick radio button
- Enable a text box only when 1 of the radio button is clicked
- jquery enable/disable text box based on radiobutton
- How to disable a textbox if particular radio button is clicked using jquery?
- Trouble shooting jquery enable/disable text box based on radiobutton
- How to enable/disable a certain textbox depending on which radiobutton was checked?