i have a group ooa radion buttons defined as so
<input type="radio" name="required[status]" id="status" value="1">Yes </label>
<input type="radio" name="required[status]" id="status_1" value="0"> No </label>
<input type="radio" name="required[status]" id="status_2" value="2">Maybe </label>
this is stores the value 0,1,2 in a field status in the db
later, i get the value from db as 1, how do i use jquery to check the appropriate radio button?
if you are trying to check the radio button element by its value you can you the jquery attribute selector.
click me
you can get the element by its value like this:
$('[value=VALUE_FROM_DB]').prop("checked", true);
Related
I have a database with some information which i then show using php and javascript
If i click on edit a javascript form opens up and i can edit the shown information. This all works great but instead of an input field (in which i show the data currently inside of the database) i would like to use a radio button.
So i need to make a radio button with the values Yes and No and if the information inside the database = 0 i want to show no and 1 to show yes
When using an input field i see yes or no (depending on what is stored inside the database) how can i use a radio button in this scenario.
my input field looks like this
<input type='text' class='input' name='test_" +id+ "' value='"+test+"' />
Considering you have html like this:
<form name="yesnoform">
<label for="no">No</label><input value="no" type="radio" name="yesno" id="no"/>
<label for="yes">Yes</label><input value="yes" type="radio" name="yesno" id="yes"/>
</form>
you can use this code to select correct radio button:
var fromDB = 0;
document.yesnoform.yesno[fromDB].checked=true;
If you want yes radio button first:
<form name="yesnoform">
<label for="yes">Yes</label><input value="yes" type="radio" name="yesno" id="yes"/>
<label for="no">No</label><input value="no" type="radio" name="yesno" id="no"/>
</form>
then use this:
var fromDB = 0;
var value = fromDB === 0 ? 1 : 0;
document.yesnoform.yesno[value].checked=true;
Here is JSBin: https://jsbin.com/fijiteruba/edit?html,js,output
Hope this helps.
I need to select a radio input with name and value in jquery
In this example how you select element with name SiblingSex and value female
<form action="">
<input type="radio" name="SiblingSex" value="male">Male<br>
<input type="radio" name="SiblingSex" value="female">Female
<input type="radio" name="ParentSex" value="male">Male<br>
<input type="radio" name="ParentSex" value="female">Female
</form>
i need some thing like
$('input[name="SiblingSex"]' /*GENDER SELECTOR */)
You can add another attribute selector with this:
$('input[name="SiblingSex"][value="female"]').val();
the above line would give you values every time whether it is checked or not.
so if you only want to have the value when it is checked too then add :checked
$('input[name="SiblingSex"][value="female"]:checked').val();
Just have a look on the Demo on my JS Fiddle Code
Shows the two scenario:
1) when you want the value without selecting radio button.
2) when you want value after selecting radio button.
or may be the thing that you want is here::
JS Fiddle Demo
Here is the html part:
<input class="demo" radio-value="yes" name="Radios" id="sample1" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample2" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample3" value="" type="radio">
<input class="demo" radio-value="yes" name="Radios" id="sample4" value="" type="radio">
How can I know which radio button the user is selected and how can I know the value of selected radio button.
I want to get the "radio-value" of the selected button. Because, I will be using value for json input..
How can I do that??
First of all, all of your radio buttons have the same id - this is illegal and can cause unexpected behavior. Provided this is fixed, you can do something like this:
var selectedValue = $("input.demo:checked").val();
and for radio-value:
var selectedRadioValue = $("input.demo:checked").attr("radio-value");
Use :selected with class selector to get the selected radio button. You should give unique ids to html elements. Also the value of all the radio button is empty string you may need to assign some values to them
$('.demo:selected').val();
$('.demo:selected').val(); // class is demo
This would do the trick!
But you need to remove the id that is similar among all the elements. You should change their value such as sample1, sample2 etc. Then you can get the value, and the id.
I'm trying to get the value of a radio button on my JSP page with
document.getElementById('rButton').value
when I press a submit type button, but the line above only returns the value the radio button started with. It does not return the actual value of it. (true/false)
How can I check the actual value of the radio Button?
I'd appreciate some help. :)
Thanks.
Radio buttons (and checkboxes) have a checked property. Their value property/attribute is the value that is sent when they are checked.
try checked instead of value.
HTML:
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer" checked> Beer<br>
<input type="radio" name="group2" value="Wine"> Wine
Javascript:
var radioBtns=document.getElementsByName("group2");
for(i=0;i<radioBtns.length; i++){
if(radioBtns[i].checked){
alert(radioBtns[i].value);
}
}
I'm using this customInput plugin (with jQuery 1.6.2) to customize the look of my radio buttons.
It works great.
The problem I have now is that I'm just trying to get the index() number of the selected radio button and it always returns 0. There are six radio buttons and I'm looking for a number between 0 and 5.
JavaScript:
$('input[name="amount"]').click(function() {
var x = $(this).filter(':checked').index();
var y = $(this).filter(':checked').val(); //<-- for troubleshooting
alert(x + y); //<-- for troubleshooting
});
Oddly, val() is still working fine and returns the proper value. Therefore, the form data is always getting the correct radio value.
http://jsfiddle.net/sparky672/LdVGD/
HTML:
<fieldset id="radioset">
<input type="radio" id="radio-1" name="amount" value="Option 1" checked="checked" /><label for="radio-1" title="">Option 1</label>
<input type="radio" id="radio-2" name="amount" value="Option 2" /><label for="radio-2" title="">Option 2</label>
<input type="radio" id="radio-3" name="amount" value="Option 3" /><label for="radio-3" title="">Option 3</label>
<input type="radio" id="radio-4" name="amount" value="Option 4" /><label for="radio-4" title="">Option 4</label>
<input type="radio" id="radio-5" name="amount" value="Option 5" /><label for="radio-5" title="">Option 5</label>
<input type="radio" id="radio-6" name="amount" value="Option 6" /><label for="radio-6" title="">Option 6</label>
</fieldset>
When simply not using the customInput plugin, the index number is then returned.
http://jsfiddle.net/sparky672/LdVGD/1/
Side Question:
After disabling the plugin, the index() returns 0, 2, 4, 6, 8, or 10. It's like the <label> itself is being counted at part of the index(), effectively doubling the count. Why should this be?
I cannot remove the <label> elements as the plugin depends on these to function.
I just want to retrieve a number from 0 to 5 depending on whether radio button 0 through 5 is checked.
Any suggestions? Perhaps another method to check which radio button is selected?
My ultimate goal? To simply change some variables depending on which button is selected.
As you've noticed, your index call doesn't quite work the way you expect it to when you don't use the plugin. From the fine manual:
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
You're getting values twice as large as you think they should be because the <label> elements are also siblings so you have five <input> elements and five <label> elements in the sibling list.
When you activate the plugin, your radio buttons get wrapped in a <div> so the structure of each button looks like this:
<div>
<input type="radio">
<label>
</div>
That leaves the radio button with a single sibling, <label>, and an index of zero.
You already have id attributes on your radio buttons so why not use those to figure out the index? Something like this:
var index = parseInt(this.id.replace(/radio-/, ''), 10) - 1;
Check the third number in these demos:
With plugin: http://jsfiddle.net/ambiguous/nGVkC/
Without plugin: http://jsfiddle.net/ambiguous/UkPh8/
Or you could use the element form of index:
If .index() is called on a collection of elements and a DOM element or jQuery object is passed in, .index() returns an integer indicating the position of the passed element relative to the original collection.
So you could do it like this:
var i = $('input[name=amount]').index(this);
And some demos:
With plugin: http://jsfiddle.net/ambiguous/yAVHn/
Without plugin: http://jsfiddle.net/ambiguous/vP3Du/