I try to get value of radio button onclick or onchange event. But it only work for first item not for other item. When I click on first radio button it alert the radio button value. But when I click on other radion button it don't alert nothing.
My code is here
HTML
<input type="radio" value="1" name="layout" id="layout" class="ace">1
<input type="radio" value="2" name="layout" id="layout" class="ace">2
<input type="radio" value="3" name="layout" id="layout" class="ace">3
<input type="radio" value="4" name="layout" id="layout" class="ace">4
jQuery
$('#layout').on("click", function(e){
alert($(this).val());
});
Try avoiding duplicate id's(Id should be unique on a page), instead use name attribute as shown below :-
$('input[name="layout"]').on("click", function(e){
alert($(this).val());
});
id attribute must be unique on the page. you always get the value of the first element with that id...
ID attribute should be unique on the page. You need to use class instead:
HTML:
<input type="radio" value="1" name="layout" class="layout ace">1
<input type="radio" value="2" name="layout" class="layout ace">2
<input type="radio" value="3" name="layout" class="layout ace">3
<input type="radio" value="4" name="layout" class="layout ace">4
jQuery:
$('.layout').on("click", function(e){
alert($(this).val());
});
From MDN:
The ID must be unique in a document, and is often used to retrieve the
element using getElementById.
<script>
function first()
{
var a = document.getElementById("opt1").value;
alert(a);
}
function second()
{
var b=document.getElementById("opt2").value;
alert(b);
}
function third()
{
var c=document.getElementById("opt3").value;
alert(c);
}
function fourth()
{
var d=document.getElementById("opt4").value;
alert(d);
}
</script>
<input type="radio" value="1" name="layout" id="opt1" class="layout ace" onclick="first()">1
<input type="radio" value="2" name="layout" id="opt2" class="layout ace" onclick="second()">2
<input type="radio" value="3" name="layout" id="opt3" class="layout ace" onclick="third()">3
<input type="radio" value="4" name="layout" id="opt4" class="layout ace" onclick="fourth()">4
Related
I am trying to get the radio button that originally had checked against it by default and reset the value of it.
In the example below the value is already set to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
I am using this to select the empty value, but how can I set it to empty first before selecting it?
$('input[name="test"][value=""]').prop('checked', true);
Select the checked input using $('input[name="test"][checked]') and update its value with .val("")
const checkedInput = $('input[name="test"][checked]');
checkedInput.val("");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="test" value="0" checked>
<input type="radio" name="test" value="1">
<input type="radio" name="test" value="2">
You can make an .each on inputs and check if value is empty example:
$('input[name="test"]').each(function() {
if($(this).val() === '') {
//do something
}
});
I would like to transfer radio button data from the first html to the second with Pure JavaScript Its ok if you use some jQuery.
jQuery used
1st HTML
<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>
In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.
2nd HTML
<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>
It would be better if you can also tell me how to disable the form
Thanks in advance for your time and effort!!
Adding my comments as an answer. To access the radio button value, since you're using jQuery, try this:
$('input[name="num"]:checked').val();
On the first HTML page,
sessionStorage.setItem("num", $('input[name="num"]:checked').val());
And then on the second page,
sessionStorage.getItem("num");
or, to set the value of the radio on the 2nd page with the stored value:
$('input[name="num"]').val([sessionStorage.getItem("num")]);
Here is a fiddle: https://jsfiddle.net/8or3chye/
You can add a change event handler to your radios and save a new value to the local storage on that event. Afterwards on page load you need to read the saved value of the radio from the local storage and if it exists - you find an element by id and set checked to true
<label for="1">
<input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
function handleClick(radio) {
localStorage.setItem('numRadio', radio.value)
}
(function() {
const radioValue = localStorage.getItem('numRadio')
if(radioValue) {
const targetRadio = document.getElementById(radioValue)
targetRadio.checked = true
}
})()
</script>
I have 2 radio buttons and would like to disable checkboxes in an array if radio button is clicked. Here is some code from a previous post in .net.
I use ASP classic and would appreciate assistance in altering this code or code that would best accomplish my goal.
<input type="radio" name="group" value="value1">
<input type="radio" name="group" value="value2">
This is the checkbox that is in the loop for the array:
<input type="checkbox" name="items" value="<%=Rs("item") %>">
$(document).ready(function () {
$('#<%= rbRadioButton.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
alert($(this).val());
});
});
How about using the .prop() method.
// Disable checkbox
$("input[value='value1']").change(function() {
$("input[name='items']").prop('disabled', true);
});
// Enable checkbox
$("input[value='value2']").change(function() {
$("input[name='items']").prop('disabled', false);
});
// Trigger reset button click
$("#btnReset").on("click", function() {
$("input[name='group']").prop('checked', false);
$("input[name='items']").prop('checked', false);
$("input[name='items']").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<fieldset>
<legend>radio:</legend>
<input type="radio" name="group" value="value1">disabled
<input type="radio" name="group" value="value2">enabled
</fieldset>
<fieldset>
<legend>checkbox:</legend>
<input type="checkbox" name="items" value="1">
<input type="checkbox" name="items" value="2">
<input type="checkbox" name="items" value="3">
<input type="checkbox" name="items" value="4">
<input type="checkbox" name="items" value="5">
</fieldset>
<input type="button" value="Reset" id="btnReset">
I have a radiobuttonGroup and I want to do an action, if the radiobutton, which is clicked, was selected before the click was triggered. Is this possible or do I have to store the current clicked value in a hidden field and then compare with the new clicked radio?
The reaseon why I need to know this is, that I want to deselect all radio's when the radio is clicked again.
<input type="radio" id="star6" name="rating" class="cat" value="6"/>
<input type="radio" id="star5" name="rating" class="cat" value="5"/>
<input type="radio" id="star4" name="rating" class="cat" value="4"/>
<input type="radio" id="star3" name="rating" class="cat" value="3" >
<input type="radio" id="star2" name="rating" class="cat" value="2"/>
<input type="radio" id="star1" name="rating" class="cat" value="1"/>
When I made this, the radiobutton IS ALWAYS selected with my if-clause:
$('.cat').on('select', function() {
if($(this).is(':checked')) {
//deselect all radio's
}
});
THANKS!
You don't need a hidden field to do it... you can just assign a class to the inputs on click.
Here is a functional sample:
http://jsfiddle.net/leojavier/o8z4monj/3/
$('.cat').on('click', function() {
if($(this).hasClass('clicked')) {
$('.cat').each(function(){
$(this).prop('checked',false);
});
}else{
$(this).addClass('clicked');
}
});
I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?
There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson
Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.
You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.