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.
Related
Trying to find a solution that allows me to enable ALL fields in a form if the first radio button (Feedback) is changed to "On" but the page must load with Feedback defaulting to "Off". All of the fields must load in the disabled state. If Feedback is changed to "on", other fields should become enabled. And then of course, if Off is selected, the fields become disabled again.
I've tried many bits and pieces of code, trying to patch together a single solution but I can't figure it out. Many of the solutions are based on very old versions of jQuery, and I'm using a current version. Not that jQuery is a requirement, pure JavaScript would be fine (if possible).
Grateful for any help. Here's the code.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
<hr />
<label>Name</label>
<input id="name" class="" type="text" name="text">
<label>Species</label>
<select id="species" class="" name="species">
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on">
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" checked>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4"></textarea>
<button id="send" class="">Send</button>
</body>
</html>
Here is what ended up working for me
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="w3-container">
<label>Feedback</label>
<input id="controlon" class="w3-radio" type="radio" name="feedback" value="on">
<label>On</label>
<input id="controloff" class="w3-radio" type="radio" name="feedback" value="off" checked>
<label>Off</label>
</div>
<hr />
<div class="w3-container">
<label>Name</label>
<input id="name" class="" type="text" name="text" disabled>
<label>Species</label>
<select id="species" class="" name="species" disabled>
<option value="0" disabled selected>- Select -</option>
<option value="1">Cat</option>
<option value="1">Dog</option>
</select>
<label>Age</label>
<input id="kp" class="" type="radio" name="age" value="on" disabled checked>
<label>Kitten/Puppy</label>
<input id="adult" class="" type="radio" name="age" value="off" disabled>
<label>Adult</label>
<label>Comments</label>
<textarea id="comments" class="" rows="4" disabled></textarea>
<button id="send" class="" disabled>Send</button>
</div>
<script>
$('input:radio[name="feedback"]').change(function() {
if ($(this).val()=='on') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', false);
}
else if ($(this).val()=='off') {
$('#name,#species,#kp,#adult,#comments,#send').attr('disabled', true);
}
});
</script>
</body>
</html>
You might need to be more specific about exactly you want enabled or disabled. Here's the general idea:
if (document.getElementById("controlon").checked === true) {
document.getElementById('whatever').disabled = false;
// or get multiple elements by whatever you want
}
For multiple fields you can do something like:
var inputs = document.getElementsByClassName('whatever');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
Detect change / jquery:
$( ".w3-radio" ).change(function() {
if ($('#controlon').is(':checked')) {
// apply the same class to everything you want enabled
$('.whatever').prop("disabled", false);
} else {
$('.whatever').prop("disabled", true);;
}
});
working example:
https://codepen.io/jfitzsimmons/pen/QRboYj?editors=1111
I try to clone a section after another section on user input (clicking a radio button), but it doesn’t works...
your help is appreciated.
<section class="clonetester">
<input id="1a" type="radio" value="1" name="q1">yes
<input id="1b" type="radio" value="0" name="q1" >no
<br />
<input id="date1" type="datetime-local" name="date" />date<br />
</section>
<section class="here">clone follows</section>
<script>
$('input').click(function(e){
$('#1a').(':checked'){
$('.clonetester').clone().appendTo(".here");
}
})
</script>
You have multiple changes that you will have to make for it to work.
Use change instead of click for input elements.
$('#1a').(':checked') has to be replaced with $('#1a').is(':checked') and should be enclosed in a if block.
$('body').on('change', 'input[type="radio"]', function() {
var $this = $(this);
if ($this.hasClass('1a') && $this.is(':checked')) {
// closeset clonetester
var $clonetester = $this.closest('.clonetester').first();
if ($clonetester) {
$clonetester.clone().appendTo(".here");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="clonetester">
<input class="1a" type="radio" value="1" name="q1">yes
<input class="1b" type="radio" value="0" name="q1">no
<br />
<input class="date1" type="datetime-local" name="date" />date
<br />
</section>
<section class="here">clone follows</section>
I want to show my checkbox value when I check it, but my code show only one value.
For example if I check 1st checkbox it show it's value at that time. If I check 2nd checkbox then it's value will display beside previous value.
What should I do?
<script>
function test(item) {
var result = $('#val').val();
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test()" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test()" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test()" />40
<br />
</html>
Please note -
You should have to use unique id
my suggestion is use class instead
Please refer this, i hope will be useful to you
$(document).ready(function(){
$('.chk_val').on('click',function(){
var result = $(this).val();
$('#course').append(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
$('input[data-action="data-click"]').on("click", function() {
if($(this). prop("checked")==true){
var dataDisplay = "<span id='" + this.value + "'>" + this.value + "</span>";
$('div#show').append(dataDisplay + " ")
}
else {
$("#" + this.value).remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
</div>
<input type="checkbox" value="20" data-action="data-click" />20
<br />
<input type="checkbox" value="30" data-action="data-click" />30
<br />
<input type="checkbox" value="40" data-action="data-click" />40
<br />
You have given same id to every checkbox so javascript finds only the first checkbox and shows its value.
You can send the clicked checkbox to the function and get its value
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val2" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val3" value="40" onclick="test(this)" />40
<script>
function test(item) {
var result = $(item).val();
$('#course').html(result);
}
</script>
function test(element) {
var result = $(element).val();
$('#course').append(result);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
Change $('#course').html(result); to $('#course').append(result);
Use this context and to get current checkbox
First of all, id attribute should be unique you need to always use class attribute for a group of elements.
For referring the clicked element pass this as click handler argument.
<script>
function test(item) {
document.getElementById('course').innerHTML = item.value;
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" value="40" onclick="test(this)" />40
<br />
</html>
Use class instead of id and bind the click event for class
$('.val').click(function() {
$("#course").html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" class="val" value="20" />20
<br />
<input type="checkbox" class="val" value="30" />30
<br />
<input type="checkbox" class="val" value="40" />40
<br />
</html>
Try this one. Pass the item to the function and display the value of item. I have attached the sample code snippet.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item.value;
$('#course').html(result);
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" id="val" value="20" onclick="test(this)" />20
<br />
<input type="checkbox" id="val" value="30" onclick="test(this)" />30
<br />
<input type="checkbox" id="val" value="40" onclick="test(this)" />40
<br />
</html>
In the first Place you should never use same ID "val" to all the Check boxes you have Classes for that.
This is just a modification to previously entered code, to let you know that you don't have to pass the whole this Object to your function rather you can directly pass the value like this.value
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
function test(item) {
var result = item;
$('#course').html($('#course').html());
}
</script>
<html>
<div id="show">
<span id="course"> </span>
</div>
<input type="checkbox" value="20" onclick="test(this.value)" />20
<br />
<input type="checkbox" value="30" onclick="test(this.value)" />30
<br />
<input type="checkbox" value="40" onclick="test(this.value)" />40
<br />
</html>
Hope that this helped you.
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>
I have a form where i used a radio button. when user select file, input field of file show and when select text input field of text show. my problem is how can i get data from a radio button which have another two input field.
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" />File
<input type="radio" name="Telephone" value="filelink2" id="rad2" />Link
</div>
<div class="span7" id="linkname">
<b>Press Release link</b>
<br/>
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;display: none;" id="filename">
<b>Press Release File</b>
<br/>
<input type="file" name="file" />
</div>
<!--Onselect Radio button -->
Try this
if ($_GET['Telephone'] == 'filelink1') {
$val = $_GET['file']; }
else {
$val = $_GET['link']; }
ps:change the method if you don't use GET
Use onclick event of the the radio button and pass this as argument.
This will pass the reference to the element which is clicked and by checking its value we can perform our logic. See Below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function OnTelephoneSelect(radioButton)
{
if (radioButton.value=="filelink1") {
document.getElementById("linkname").style.display = "none";
document.getElementById("filename").style.display = "";
}
else
{
document.getElementById("linkname").style.display = "";
document.getElementById("filename").style.display = "none";
}
}
</script>
</head>
<body>
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" onclick="OnTelephoneSelect(this)"/>File
<input type="radio" name="Telephone" value="filelink2" id="rad2" onclick="OnTelephoneSelect(this)" />Link
</div>
<div class="span7" id="linkname" style="display: none;">
<b>Press Release link</b>
<br />
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;" id="filename">
<b>Press Release File</b>
<br />
<input type="file" name="file" />
</div>
</body>
</html>
May this help you show and hide div elements based on the selection of radio buttons.
<div class="span7">
<b>Select File or Link</b>
<input type="radio" name="Telephone" value="filelink1" id="rad1" checked="" />File
<input type="radio" name="Telephone" value="filelink2" id="rad2" />Link
</div>
<div class="span7" id="linkname">
<b>Press Release link</b>
<br/>
<input type="text" name="link" placeholder="Press Link" />
</div>
<div class="span7" style="margin-left:42px;display: none;" id="filename">
<b>Press Release File</b>
<br/>
<input type="file" name="file" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="filelink1")
{
$("#filename").hide();
$("#linkname").show();
}
if($(this).attr("value")=="filelink2")
{
$("#linkname").hide();
$("#filename").show();
}
});
});
</script>
For live demo click here