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.
Related
I have the following radio buttons and a dropdown in my rails form. One radio button is for 'yes' and another for 'no'
<input type="radio" value="true" name="staff[optquestion]">
<input type="radio" value="false" name="staff[optquestion]">
<select class="form-control" name="staff[Redesignation]"><option value="">
</option>
I want when a user clicks on 'yes' the dropdown below gets selected.
Here is my javascript/jquery:
$(document).ready(function(){
$("[name=staff[optquestion]]").change(function(){
$("[name=staff[[Redesignation]]").toggle($("
[name=staff[optquestion]]").index(this)===1);
});
});
I have placed the script in application.js but nothing happens. When I place the script in staffs.coffee I get the error "reserved word 'function'"
I know I could me mixing js and jquery here but am only starting out. Thanks for your help.
You must be careful while selecting elements by name in jQuery.
For handling radio button inputs you should use here in your case :
$("input:radio[name='staff[optquestion]']")
And also remember to enclose the inputs in a form for better control.
So,
<form>
<input type="radio" value="true" name="staff[optquestion]" checked="checked">
<input type="radio" value="false" name="staff[optquestion]">
<select class="form-control" name="staff[Redesignation]">
<option value="">
</option>
</select>
</form>
And the JS will be :
$(document).ready(function(){
$("input:radio[name='staff[optquestion]']").change(function(){
$("[name='staff[Redesignation]']").toggle();
});
});
Since there are only two radio buttons here in use, this will work. Incase you have more than 2 you must check with values of the radio buttons using this in the event handler.
I have the following radio group.
<input type="radio" name="GROUP1" ng-checked="true" ng-model="group1" id="name1" value="one">
<input type="radio" name="GROUP1" ng-checked="false" ng-model="group1" id="name2" value="two">
<input type="radio" name="GROUP1" ng-checked="false" ng-model="group1" id="name3" value="three">
When a radio input is clicked, I want to be able to figure out if, before it was clicked, if it originally active or not.
For example, if I clicked on #name1, it would respond back true because it was already checked.
If I clicked on #name3, it would respond back false because #name1 was originally selected. But if I click on #name3 again, it would return back true.
Could anyone help me with this?
You can watch this code in your controller.
Now, whenever your model will be changed(in the ui or in the controller), this event will be raised.
$scope.$watch('group1', function (newValue, oldValue) {
//Place your code here ...
// You have access to the old and to the new Value
});
Just for your information, try to use at least watches as you can...
js:
if(this.checked){
alert("selected");
}else{
this.checked=true;
}
put this code in a function and call it in onClick event of radio button
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 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;
}
}
Example need for ajax, where on selecting a radio button will dynamically produce drop down
If you use or can use jQuery, this is the way I would do it:
Having this HTML:
<input type="radio" name="myradio" value="foo" />
<input type="radio" name="myradio" value="bar" />
<input type="radio" name="myradio" value="baz" />
and assuming you have a page "your_page.php" that returns the list to populate the drop down as JSON, do this:
$("input[#name='myradio']").change(function(){
var selected_value = $("input[#name='myradio']:checked").val();
$.getJSON("your_page.php", { value: selected_value }, populate_dropdown);
});
function populate_dropdown(items) {
// "items" is the ajax-loaded list based on the selected radio button.
// Clear the drop down, populate it and show it if hidden.
}
could you explain yourself a little more?
You need an example where if you click on a radio button and select is showing?
if yes you don't need ajax.
My radio: <input type="radio" name="YOUR_RADIO" onclick="document.getElementById('selectfield').style.display='';" />
<div id="selectfield" style="display:none">
<select><option>option</option></select>
</div>
good luck ...