I want to get a text box to appear when a radio button is selected yes . This is what my code looks like;
Care of Address? <br>
Yes<input type="radio" name="radio1" value="Yes" onClick="getResults(this)">
No<input type="radio" name="radio1" value="No" onclick="getResults(this)">
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
(document).ready(function() {
(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? (".text").show() : (".text").hide();
};
</script>
Can anyone help me
Abi
Try this:
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvtext = document.getElementById("dvtext");
dvtext.style.display = chkYes.checked ? "block" : "none";
}
<label for="chkYes">
<input type="radio" id="chkYes" name="chk" onclick="ShowHideDiv()" />
Yes
</label>
<label for="chkNo">
<input type="radio" id="chkNo" name="chk" onclick="ShowHideDiv()" />
No
</label>
<div id="dvtext" style="display: none">
Text Box:
<input type="text" id="txtBox" />
</div>
You don't even need JavaScript for this, let alone JQuery or Vue
#dvtext {
display: none;
}
#chkYes:checked ~ #dvtext {
display: block;
}
<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>
<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>
<div id="dvtext">
Text Box:
<input type="text" id="txtBox" />
</div>
The jquery
$('.no, .yes').click(function() {
if($('.no').is(':checked')) {
$('.adrs').hide();
}
if ($('.yes').is(':checked')){
$('.adrs').show();
}
});
I added the class yes to the yes radio button and no to the no radio button. Alos i added the class adrs to the text fields that are adresses. Then based on the classes im hiding the adresses or showing it
Codepen
It seems that you missed to add $ before (document) as well as before (.text).
Please add $ and see if it works or not.
So your script would become like
<script>
$(document).ready(function() {
$(".text").hide();
});
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
Hope this helps.
that's what you should do
div.text{display:none}
Care of Address?
Yes
No
<div class="text"><p>Address Line 1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Address Line 2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
<div class="text"><p>Address Line 3 <input type="text" name="text3" id="text3" maxlength="30"></p></div>
<div class="text"><p>Address Line 4 <input type="text" name="text4" id="text4" maxlength="30"></p></div>
<div class="text"><p>Postcode <input type="text" name="text5" id="text5" maxlength="30"></p></div>
<script>
function getResults(elem) {
elem.checked && elem.value == "Yes" ? $(".text").show() : $(".text").hide();
};
</script>
https://jsfiddle.net/2w0zf887/
Here is fiddle for you https://jsfiddle.net/Simplybj/mjLwusut/4/
You can achieve this by binding your radio buttons with click event like this
$('#rdYes').on('click', function() {
$(".text").show();
});
$('#rdNo').on('click', function() {
$(".text").hide();
});
and here is your HTML for that. Its better to wrap input types with label tag. And also if you are going to hide element first then try hide on DOM rendering rather than after DOM is ready to prevent from flickering
Care of Address?
<br>
<label for="rdYes">Yes</label>
<input id="rdYes" type="radio" name="radio1" value="Yes" onClick="getResults(this)">
<label for="rdNo">No</label>
<input id="rdNo" type="radio" name="radio1" value="No" onclick="getResults(this)" checked="checked">
<div class="text" style="display:none;">
<p>Address Line 1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
Related
I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>
You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
Having several rows, where each row has a checkbox, a label, and an input text
How can I enable/disable the checkbox's neighbour input text when the check box is selected, using jquery. By this I mean to just enable/disable the input that is on same row with checkbox
I have:
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
and do not know how to do this
$(':checkbox').change(function(){
$('input:text').?find?.prop("disabled", !$(this).is(':checked'));
});
here is fiddle
maybe like this:
$(':checkbox').change(function(){
var this_nr=$(this).attr('id').substr(-1);
$('#input'+this_nr).prop('disabled', !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
or like this:
$(':checkbox').change(function(){
$('input:text').eq($(':checkbox').index(this)).prop("disabled", !$(this).is(':checked'));
});
$(':checkbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label >text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label >text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label >text 3 </label>
<input id="input3" type="text">
</p>
</form>
I would use event delegation on the form, in the handler using nextAll to find the next text box.
// disable all the text fields
$('#myform :text').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox', function (evt) {
let textbox = $(this).nextAll(':text');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This will toggle when you check the TOS">
</p>
</form>
This works if your entire form is in this checkbox followed by textbox form; it will break if you have any other checkboxes that don't control a textbox or textboxes that shouldn't be disabled. To be more flexible, I would add a class to the items I wanted to have this behavior:
// disable all the text fields
$('#myform :text.toggle-input').each(function () {
$(this).prop('disabled', true);
});
$('#myform').on('change', ':checkbox.toggle-input', function (evt) {
let textbox = $(this).nextAll(':text.toggle-input');
textbox.prop('disabled', (i, val) => !val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<p>
<input id="chk1" class="toggle-input" type="checkbox">
<label for="chk1">text 1 </label>
<input id="input1" class="toggle-input" type="text">
</p>
<p>
<input id="chk2" class="toggle-input" type="checkbox">
<label for="chk2">text 2 </label>
<input id="input2" class="toggle-input" type="text">
</p>
<p>
<input id="chk3" class="toggle-input" type="checkbox">
<label for="chk3">text 3 </label>
<input id="input3" class="toggle-input" type="text">
</p>
<p>
<label for="tos">I agree to the Terms of Service</label><input id="tos" type="checkbox"><br>
<label for="comment">Comments </label><input id="comment" type="text" value="This won't toggle when you check the TOS">
</p>
</form>
You could use the jQuery siblings function to retrieve the neighboring textbox and enable/disable it based on the .checked property. I've called .change() at the end to set the initial state of the textboxes.
$(":checkbox")
.change(function() {
$(this)
.siblings("input[type='text']")
.prop("disabled", !this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input id="chk1" type="checkbox">
<label>text 1 </label>
<input id="input1" type="text">
</p>
<p>
<input id="chk2" type="checkbox">
<label>text 2 </label>
<input id="input2" type="text">
</p>
<p>
<input id="chk3" type="checkbox">
<label>text 3 </label>
<input id="input3" type="text">
</p>
</form>
im sorry but i tried everything that's available in the internet but all "solutions" doesnt work.
if the radio button is clicked, the textbox under that radio button will be enabled.else disabled.
pls help me with this.when i click the radio button, the textbox is still disabled.
js
function radioModeOfPayment(x){
if(document.getElementById('mMininum').checked == true){
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if(document.getElementById('numMonth').checked == true){
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
html
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Minimum Payment</label><br>
<input type="text" class="tlabel" readonly="true" value="Amount"> <input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value=""><br>
<input type="text" class="tlabel" readonly="true" value="Starting Date"> <input type="date" disabled="disabled" id="first" name="sdate"><br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);"> <label class="w3-validate">Number of Months</label><br>
<input type="text" class="tlabel" readonly="true" value="Months"> <input type="text" class="tlabel w3-border" readonly="true" id="numMonth-months" name="numMonth-months" value=""><br>
</div>
remove input text readonly attribute
function radioModeOfPayment(x) {
if (document.getElementById('mMininum').checked == true) {
document.getElementById("mMininum-amount").disabled = false;
document.getElementById("first").disabled = false;
document.getElementById("numMonth-months").disabled = true;
}
if (document.getElementById('numMonth').checked == true) {
document.getElementById("numMonth-months").disabled = false;
document.getElementById("mMininum-amount").disabled = true;
document.getElementById("first").disabled = true;
}
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Amount">
<input type="text" class="tlabel w3-border" disabled="disabled" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly="true" value="Starting Date">
<input type="date" disabled="disabled" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth" onclick="radioModeOfPayment(this);">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly="true" value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
EDIT 2
In Snippet 2 it is exactly the same as OP's layout. By adding nth-of-type, the inputs on the right-side are the only inputs that are enabled and disabled while the ones on the left are unaffected. The attribute disabled and have been removed.
EDIT
Sorry forgot OP wants radio buttons, it works just as well.
Here's a simple CSS only solution.
This uses:
adjacent sibling selector
pointer-events
SNIPPET 1
.chx:checked + input {
pointer-events: none;
}
.chxs:checked ~ input {
pointer-events: none
}
input[name="rad"]:checked + input[type="text"] {
pointer-events: none;
}
<p>This example uses + which affects only the sibling that's immediately after .chx</p>
<input class='chx' type='checkbox'>
<input>
<br/>
<br/>
<p>This example uses ~ which affects all siblings that follow .chxs</p>
<input class='chxs' type='checkbox'>
<input>
<input>
<input>
<br/>
<br/>
<p>Works on radio buttons as well</p>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
<fieldset>
<input name='rad' type='radio'>
<input type='text'>
</fieldset>
SNIPPET 2
.w3-radio:checked ~ input:nth-of-type(2n-1) {
pointer-events: none;
}
<div class="trbl-padding-5">
<input type="radio" class="w3-radio" id="mMininum" name="mpayment" value="mMininum">
<label class="w3-validate">Minimum Payment</label>
<br>
<input type="text" class="tlabel" readonly=true value="Amount">
<input type="text" class="tlabel w3-border" id="mMininum-amount" name="mMininum-amount" value="">
<br>
<input type="text" class="tlabel" readonly=true value="Starting Date">
<input type="date" id="first" name="sdate">
<br>
</div>
<div class="trbl-padding-5">
<input class="w3-radio" type="radio" id="numMonth" name="mpayment" value="numMonth">
<label class="w3-validate">Number of Months</label>
<br>
<input type="text" class="tlabel" readonly=true value="Months">
<input type="text" class="tlabel w3-border" id="numMonth-months" name="numMonth-months" value="">
<br>
</div>
If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>
give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example
Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE
You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>
I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.
I want create textarea with javascript when I click on the "yes" radio button in a appropriate div place with id?
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" ><b>YES</b>
</div>
<div id="positiontext"></div>
help me
Instead of creating & removing the textarea, I would set its display like
function nameChange(el) {
document.getElementById('positiontext').style.display = el.value == 'yes' ? '' : 'none';
}
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" onchange="nameChange(this)" checked /><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="nameChange(this)" /><b>YES</b>
</div>
<div id="positiontext" style="display: none;">
<textarea name=""></textarea>
</div>
Try this by adding the onclick event to the yes radio button,
<input type="radio" name="name" id="optionsRadios" value="yes" onchange="addDIV()">
In javascript,
<script>
function addDIV() {
document.getElementById('positiontext').innerHTML = "<input type='textarea' name='myText' />"
}
</script>
FIDDLE DEMO
i think you should need to do this by using gome function which are specially made for this:
<div class="controls">
<input type="radio" name="name" id="optionsRadios" value="no" checked><b>NO</b>
<input type="radio" name="name" id="optionsRadios" value="yes" onclick="addtxt();" ><b>YES</b>
</div>
<div id="positiontext"></div>
javascript:
var addtxt = function(){
var positiontext(parent) = document.getElementById("positiontext");
var textarea(child) = document.createElement("textarea");
textarea(child).addAttribute("style", "(some properties)") //there are other ways also to add some attribute but for now use this
positiontext(parent) .appendChild("textarea(child)")
}