I need some help.
I have program that changes table values based on user input in radio box
similar to this page:
clicky
But the problem is I want users to select the radio input only once; if they select another
radio then values of tables get messed up.
So what I want to know is how can I make an alert box when user selects the radio input twice?
Similar to this website clicky try clicking radio button twice and alert popsup.
Please can anyone help?
It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!
For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.
<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option
<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option
var selectedValues = {};
function radioClicked(rb) {
if (selectedValues[rb.name] === undefined) {
selectedValues[rb.name] = rb.value;
doTableProcessing();
}
else {
alert("You can't change the selected values");
document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
}
}
Related
I have a checkout page with two radio buttons one for 'Register Account' and 'Guest Account' checkout methods.
I want a single checkbox that when it is checked, it checks the Register Account radio button and when it isn't checked it checks the Guest Account checkout radio button.
Here is my code so far:
http://jsfiddle.net/hQbpZ/160/
HTML:
Remember Me for Future Purposes :<input type="checkbox" id="checkbox1"/> <br/><br/>
Register Account :<input type="radio" id="radio1" name="radio"/><br>
Guest Checkout :<input type="radio" id="radio2" name="radio"/><br>
JS:
jQuery('#checkbox1').click(function(){
jQuery('#radio1').attr('checked', true);
});
jQuery('#checkbox1').click(function(){
jQuery('#radio2').attr('checked', false);
});
I got part of the functionality down but I don't know how to uncheck a radio button when a checkbox is unchecked.
You can do it like this:
jQuery('#checkbox1').click(function () {
jQuery('#radio1').prop('checked', $(this).is(':checked'));
jQuery('#radio2').prop('checked', !$(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remember Me for Future Purposes :
<input type="checkbox" id="checkbox1" />
<br/>
<br/>Register Account :
<input type="radio" id="radio1" name="radio" />
<br>Guest Checkout :
<input type="radio" id="radio2" name="radio" />
<br>
Just add a toggle variable and link the checked attribute to it
http://jsfiddle.net/hQbpZ/163/
var registered = false;
jQuery('#checkbox1').click(function(){
registered = !registered
jQuery('#radio1').attr('checked', registered);
jQuery('#radio2').attr('checked', !registered);
});
It is impossible to manually uncheck radio buttons, simply because they're not meant to be used that way (read more). The only way to have a radio button uncheck is by creating multiple radio buttons sharing the same name tag, meaning your HTML is already correct.
Your JavaScript does need some changes. It is not necessary to bind a function twice to the same event, so you could reduce it to one binding. Inside that binding you check whether the clicked checkbox is now on or off, and depending on that you check one of the two radio buttons, like so:
$('#checkbox1').click(function() {
if($('#checkbox1').prop('checked') === true) {
$('#radio1').attr('checked', true);
} else {
$('#radio2').attr('checked', false);
}
});
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
I have a set of two radio buttons having same id
<input type="radio" id="rad" name="mode"value="test" />test
<input type="radio" id="rad" name="mode" value="dev"/>dev
user have to select any one of the radio button.so while validating if second radio is selected the following validation alerts always.
if ($('#rad').prop('checked') != true ) {
alert(' Please Choose mode!!')
return false;
}
I only have to alert if user did not select any one of them.and no need to alert if user selected one radio button.
In my case if user select first radio button it alerts anything but choosing second radio it alerts Please Choose mode.
ID of element uniquely identifies the html element! read this if you keen :) https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really
Also : http://jsfiddle.net/Pkq3B/
have fun, lemme know how it goes!
you could use class like this:
if (!$('.rad').is(':checked')) {
alert(' Please Choose mode!!')
return false;
}
html
<input type="radio" class="rad" name="mode"value="test" />test
<input type="radio" class="rad" name="mode" value="dev"/>dev
Try to use length of checked radio buttons like,
if (!$('input[name="mode"]:checked').length) {
alert(' Please Choose mode!!')
return false;
}
Working demo
You don't need jQuery for that purpose. You can use pure JavaScript:
if((document.getElementById('rad').value!='test')||document.getElementById('rad').value!='dev'))
{
alert("please select");
}
I have a variable called category that must change its value according to the selected radio button. The problem is that I do not get that at the click of a radio button or another, the value will change instantly.
This is the code I have:
<form>
<input type="radio" name="category" value="doctor" /> Doctor
<input type="radio" name="category" value="police" checked /> Policia
</form>
var category = $('[name="category"]:checked').val();
I need you to automatically change the value of the variable category when you click the radio buttons.
Attach an event handler to the change event:
$(':radio[name="category"]').change(function() {
var category = $(this).filter(':checked').val();
});
You need to change the value of category every time a user changes the selected radio button. Therefore you will need an event to trigger when the user clicks on a radio. You can check out the FIDDLE
var category = null;
$("input[name='category']").click(function() {
category = this.value;
});
I think you need simply something like this:
var category;
$('radio[name="category"]').click(function(){
category=this.value;
});
var category;
$(':radio[name="category"]').change(function() {
category=this.value;
});
And this is a jsfiddle.net demo.
You shouldn't give the same ID for more than one element, you should use class instead like this :
<form>
Option 1<input type="radio" name="opt" class="radio" value="Option 1">
Option 2<input type="radio" name="opt" class="radio" value="Option 2">
</form>
instead of :
<form>
Option 1<input type="radio" name="opt" id="radio" value="Option 1">
Option 2<input type="radio" name="opt" id="radio" value="Option 2">
</form>
and your code still the same and it should work fine :)
Instead of using category variable use $('[name="category"]:checked').val() wherever you want the value of the checked radio button. Otherwise you can make use of change or click event to set the checked radio buttons value into category variable.
utilize the .change() in order to capture the change event for a radio button.
I'm trying to validate a form that contains several different radio buttons. A few radio buttons in the form have the same classname 'video_type'.
In the jQuery validation script, after the form is submitted I want to check if any of the radio buttons with the classname 'video_type' have been selected. If the user has selected at least one radio button with the classname 'video_type' and the value as 1, it should return true. Otherwise it should return false.
At the moment I'm using this:
HTML:
<input type="radio" name="video_option_1" class="video_option" value="1">Yes
<input type="radio" name="video_option_1" class="video_option" value="0">No
<input type="radio" name="video_option_2" class="video_option" value="1">Yes
<input type="radio" name="video_option_2" class="video_option" value="0">No
jQuery:
$("#completeOrderForm").submit(function(){
if($(".video_type").val() == 0){
$("#showerrors").show().html("Please select a video type.");
return false;
}
});
But I realise it's incorrect. What do I need to do?
This should work:
if ($(".video_option[value='1']:checked").length == 0) {
$("#showerrors").show().html("Please select a video type.");
return false;
}
Basically you're selecting every element with the class .video_option that have the value 1 ([value='1']) and are checked (using the :checked selector). It then counts the amount of elements selected, if the result is 0 no radio's are checked.
Fiddle: http://jsfiddle.net/bjorn/UwufF/6/
EDIT
You talk about radio buttons with the classname video_type yet the code shows video_option, I went by the code when making the example.