I'm trying to enable a textfield based on which option is chosen in a radio button. I'm just really new to any javascript or jquery, so I really need some help.
This is the TR from a table where the radio buttons and input fields are placed
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
<script type="text/javascript">
$('#no').click(function () {
$('#test').removeAttr("disabled");
});
$('#yes').click(function () {
$('#test').attr("disabled", "disabled");
});
</script>
</td>
</tr>
The problem is probably really trivial, but again, I haven't worked with this at all. Any help would be appreciated!
You can do it like like following using change event instead of click.
$(':radio[name=choose]').change(function () {
var isChecked = $('#yes').is(':checked');
$('#test').prop("disabled", !isChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes"> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" checked> No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>
Wrap your code in document ready function
<script type="text/javascript">
$(function(){
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
})
</script>
$('#no').click(function()
{
$('#test').removeAttr("disabled");
});
$('#yes').click(function()
{
$('#test').attr("disabled","disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><b>Yes or no?</b></td>
<td><input id="yes" type="radio" name="choose" value="yes" checked> Yes</td>
</tr>
<tr>
<td></td>
<td><input id="no" type="radio" name="choose" value="no" > No</td>
</tr>
<tr>
<td>
<input type="text" name="disabledtextfield" id="test" disabled />
</td>
</tr>
</table>
Related
now im doing some PHP project combine with JQuery for radio button. Im new for JQuery code. now i making array for radio button. i want to get individual value when i click one of the radio button.
here is the code that i trying. before that. i make a sample on this link https://repl.it/#ferdinandgush/get-value-radio-button. just press RUN button on the top then you able to test it.
html
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
JS
$(function() {
$('.radioDeal').on('input', function(){
console.log($(this).attr("name"));
var name = $(this).attr("name");
console.log($('input[name="+ name +"]:checked').val());
});
});
so what im focusing is, i able to get individual attribute name when i click on of the radio button. from that attribute name, i want to get the value. but not work.
do i able to do that?.
please help
You almost have it, you can get the value like this:
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
Working example:
$(function() {
$('.radioDeal').on('input', function(){
var name = $(this).attr("name");
var checkedvalue = $('input[name="'+ name +'"]:checked').val();
console.log(name+' = '+checkedvalue);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
Since the change event triggers when state changes from not checked to checked it is therefore the ideal event to use as the this refers to the radio just checked:
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
DEMO
$(function() {
$('.radioDeal').on('change', function() {
console.log( `${this.name} = ${this.value}` );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][0]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][0]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][1]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][1]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][3]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][3]" value="no" >No
</td>
</tr>
<tr>
<td class="tg-0lax">spidol</td>
<td class="tg-0lax">$ 15 <input type="hidden" name="itemprice" value="15"></td>
<td class="tg-0lax">
<input class="radioDeal" type="radio" name="deal[12][4]" value="yes">yes
<input class="radioDeal" type="radio" name="deal[12][4]" value="no" >No
</td>
</tr>
</tbody>
</table>
How do I check if all 'NO' answers on Yes/No table were chosen, this has to check on each change to any of the Yes/No answers, and then send an alert if all 'NO' were selected
Tried the below but no response seen..
$('.mb-n').change(function(){
if ($('.mb-n:checked').length == $('.mb-n').length) {
alert('all no ');
} else { alert('all y ');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="123" value="Y" class="{required: true, messages:{required:''}}" rel="" id="123_Y"></td>
<td class="mb-n"><input type="radio" name="123" value="N" checked="checked" id="123_N" rel=""></td>
</tr>
</table>
Using vanilla JavaScript :
function listenForInputChange ()
{
// Get all inputs with a NO value and spread them into an array
let inputs = [ ...document.querySelectorAll( '.mb-n > input' ) ];
// Add input event listener on table and listen for change
document.querySelector( 'table' ).addEventListener( 'input', evt => {
// if every inputs are checked
if ( inputs.every( input => input.checked ) )
{
// Do something...
console.log( 'All answers are NO' );
}
}, false );
}
listenForInputChange();
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="q1" value="Y"></td>
<td class="mb-n"><input type="radio" name="q1" value="N" checked></td>
</tr>
<tr class="mb-even">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y"><input type="radio" name="q2" value="Y"></td>
<td class="mb-n"><input type="radio" name="q2" value="N" checked></td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y"><input type="radio" name="q3" value="Y"></td>
<td class="mb-n"><input type="radio" name="q3" value="N" checked></td>
</tr>
</table>
You need to check if the radio is checked, not if the td is checked (<td> doesn't have a checked property).
I made some adjustments to your code, including modifications in HTML, that was a little bit weird. I added a similar class to all radio buttons and a similar class to all YES radios and NO radios, that way you'll have a much better control over what is selected and what is not.
Check below
$('.radioBtn').change(function(){
if ($('.radioNo:checked').length == $('.mb-n').length) {
console.log('all no');
} else if ($('.radioYes:checked').length == $('.mb-y').length){
console.log('all yes');
}else{
console.log("Some Yes and some No")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y">
<input type="radio" name="123" value="Y" class="radioBtn radioYes" id="123_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="123" value="N" class="radioBtn radioNo" checked id="123_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y">
<input type="radio" name="1234" value="Y" class="radioBtn radioYes" id="1234_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="1234" value="N" class="radioBtn radioNo" checked id="1234_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y">
<input type="radio" name="12345" value="Y" class="radioBtn radioYes" id="12345_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="12345" value="N" class="radioBtn radioNo" checked id="12345_N" >NO
</td>
</tr>
</table>
Assuming that every row in the table has a checkbox you should be able to do it like this without changing anything in your setup:
$('.mb-n').change(function(){
if ($("table").find("tr").length == $(".mb-n > input[type='radio']:checked").length)
window.alert("Oh noes...");
});
I have a radio button with 2 options. It goes like
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td>textbox here</td>
I want to display a textbox when i click "Different".
Its a JSP page. Thanks.
It would be nice to know which javascript framework you use.
With vanilla javascript this is a simple way by adding and removing hidden class on click event simply because that's most likely the only way to guaranty browser compatibility.
https://plnkr.co/edit/e9Jet9kd3f278uROO5R0?p=preview
// js
window.onload = () => {
var rad2 = document.getElementById('r2');
var rad1 = document.getElementById('r1');
var input = document.getElementById('myInput');
rad2.addEventListener("click", function(){
input.classList.remove('hidden');
});
rad1.addEventListener("click", function(){
input.classList.add('hidden');
});
}
// html
<h1>Hello Plunker!</h1>
<td>City : </td>
<td><input type="radio" name="r_city" id="r1" value="Same" checked="checked" /></td>
<td><input type="radio" name="r_city" id="r2" value="Different" /></td>
<td><input id="myInput" class="hidden"/></td>
// css
.hidden {
display: none;
}
Here you go, if you want to again hide it just use .hide() function
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked"/>Same</td>
<td><input type="radio" id="testChecked" name="r_city" value="Different" />Different</td>
<td class="show-this" style="display:none">textbox here</td>
</tr>
</table>
<script>
$('#testChecked').click(function(){
if ($(this).is(':checked'))
{
$('.show-this').show();
}
});
</script>
Make sure to add jQuery***
Here is what you need to do. If you are using a common class for the textbox inside <td> then you can use the class selector instead of input[type="text"].
$(document).ready(function(){
$("input[type='radio']").click(function(){
var textBox = $(this).closest('tr').find('td input[type="text"]');
if($(this).val() === 'Different'){
$(textBox).show();
} else {
$(textBox).hide();
}
});
});
td input[type='text'] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>City : </td>
<td><input type="radio" name="r_city1" value="Same" checked="checked" />Same</td>
<td><input type="radio" name="r_city1" value="Different" />Different</td>
<td><input type='text' /></td>
</tr>
</table>
I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together
You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons
First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.
For this code below, I need your expertise.
<html>
<head>
<script>
function delrow() {
document.getElementById("db_grid_row1").style.display = 'none';
document.getElementById("db_grid_row2").style.display = 'none';
document.getElementById("db_grid_row3").style.display = 'none';
document.getElementById("db_grid_row4").style.display = 'none';
}
</script>
</head>
<body>
<form action="rowhide_action.php" method="post" name="save_form">
<input type="button" value="Delete" onClick="delrow();"></input>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>Databases</th>
</tr>
</thead>
<tbody id="db_grid">
<tr id="db_grid_row1">
<td><input type="checkbox" name="cbox[]" value="1" ></input></td>
<td><input type="text" name="db[]" value="Oracle"></input></td>
<td><input type="hidden" name="modeflag[]" value="S" ></input></td>
</tr>
<tr id="db_grid_row2">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="MySQL"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row3">
<td><input type="checkbox" name="cbox[]" value="1"></td>
<td><input type="text" name="db[]" value="Cassandra"></input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
<tr id="db_grid_row4">
<td><input type="checkbox" name="cbox[]" value="1"></input></td>
<td><input type="text" name="db[]" value="Mongo"> </input></td>
<td><input type="hidden" name="modeflag[]" value="S"></input></td>
</tr>
</tbody>
</table>
</br>
<input type="submit" value="Save"></input></br></br>
</form>
</body>
</html>
When check-boxes are checked and delete button is clicked, I want
(1) The checked-box rows have to be hidden.
(2) change element modeflag[] value="D" for the hidden rows
please help.
Thanks in advance.
with jquery it goes like this:
$(function() {
$("#del").on('click', delrow);
});
function delrow() {
var checks = $( "input[type=checkbox]:checked" );
checks.parent().parent().hide();
}
DEMO
notice I removed the event from your html element to the javascript..
let me know if you have any questions