I need to update a hidden field based on user selected button
Code:
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
Javascript code:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
// I need to write code here to update the hidden field 'selectedBank' based on user selected bank radio button
}
Description
Give your radio buttons a value then you can use jQuery's change() and val() methods.
jQuery.change() Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
jQuery.val() Get the current value of the first element in the set of matched elements.
Check out my sample and this jsFiddle Demonstration
Sample
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
$("input[type='radio'][name='bankRadioButtons']").change(function(event) {
$("input[type='hidden'][name='selectedBank']").val($(this).val());
});
More Information
jQuery.change()
jQuery.val()
Update
The following would will in better performance. Use class and the id attribute in html.
<div id="bankRadioButtons">
<table>
<tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" class="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
<tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank2">Bank2</label></td></tr>
<tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" id="selectedBank" value="" />
$(".bankRadioButtons").change(function(event) {
$("#selectedBank").val($(this).val());
});
Updated jsFiddle
You can do:
$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
switch(this.id)
{
case "Bank1" : $("#selectedBank").val("Bank1");
break; // and then case "Bank2" etc.
}
}
Try this:
var value = $("input[#name=bankRadioButtons]:checked").val();
$("input[#name=selectedBank]").val(value);
Good-Luck !
Related
I am attempting to retrieve custom data attributes from selected radio buttons from multiple button groups and display them for the user.
Here is an example of the radio buttons I am working with:
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool"/>
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool"/>
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping"/>
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping"/>
<span id="quote-items" name="quote-items"></span>
I am currently using this jQuery to extract the data attributes from the selected radio buttons but currently only the top-most radio button loaded in the DOM will only display as my output:
var itemNames = [$(".calc:checked").attr("data-selection-name")];
$("#quote-items").text(itemNames)
Thanks!
Whenever you use .attr(key) method it will always fetch you the value of first matched element. To get the value from all matched element, you need to iterate, there are various methods for that. .each() can be used to iterate and push the value in an array.
Here I have used .map() to get an array of attribute value for checked checkbox
$('.calc').change(function() {
var itemNames = $(".calc:checked").map(function() {
return $(this).attr("data-selection-name")
})
.get() //Get an array
.join(',') //Generate Comma seperate string;
$("#quote-items").text(itemNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="Small Pool" />
<input type="radio" id="poolMediumButton" name="pool" class="calc" value="1000" data-selection-name="Medium Pool" />
<input type="radio" id="landscapingSmallButton" name="landscaping" value="100" class="calc" data-selection-name="Small Landscaping" />
<input type="radio" id="landscapingMediumButton" name="landscaping" value="500" class="calc" data-selection-name="Medium Landscaping" />
<span id="quote-items" name="quote-items"></span>
Additionaly, You can use Element.dataset property to access data-* prefixed attribute like
this.dataset.selectionName;
instead of
$(this).attr("data-selection-name");
How to
<input type="radio" id="poolSmallButton" name="pool" class="calc" value="500" data-selection-name="productname" ata-selection-price="productprice" />
$("#sonuc-v2").text(data-selection-price);
$("#sonuc-v2").text(data-selection-price);
according to this article
calling the same function when any radio button or checkbox are clicked
I can call the function anytime radiobutton's are checked.
<script type="text/javascript">
$("input.calc").change(function() {
calcPrice();
});
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
</script>
<input class="calc" type="radio" name="android" value="1">smart
<input class="calc" type="radio" name="android" value="2">tablet
<input class="calc" type="radio" name="android" value="3">both
<input class="calc" type=checkbox name="func" value="0">push
<input class="calc" type=checkbox name="func" value="0">distribute
<input class="calc" type=checkbox name="func" value="0">internationalization
But now I can't add class 'calc' for each rows,
but I can add 'calc' on the wrapper div.
(it is because of formbuilder of symfony2)
now my code is this.
<div class="calc">
<input type="radio" name="android" value="1">smart
<input type="radio" name="android" value="2">tablet
<input type="radio" name="android" value="3">both
</div>
<div class="calc">
<input type=checkbox name="func" value="0">push
<input type=checkbox name="func" value="0">distribute
<input type=checkbox name="func" value="0">internationalization
</div>
Is it possible to get the when any buttons are clicked ,same as before?
Try this,
$(".calc input[type='radio'], .calc input[type='checkbox'] ").change(function() {
calcPrice();
});
You can use
$(".calc :radio, .calc :checkbox").change(calcPrice);
The following code will fire whenever a radio input changes (such as when clicked). You could easily change this to reference all inputs instead of just radio boxes, by using input instead of input[type="radio"].
You can access the individual checked status of the input using this.checked
$('.calc').on('change', 'input[type="radio"]', function(event) {
if(this.checked) {
// Input is currently checked.
}
});
$(".calc :radio, .calc :checkbox").change(function() {
calcPrice();
});
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
Please check this jsfiddle Click here
I have some radio button and checkboxs like
<script type="text/javascript">
function calcPrice(){
console.log(checked!!);
}
</script>
<input type="radio" name="android" value="1">smart
<input type="radio" name="android" value="2">tablet
<input type="radio" name="android" value="3">both
<input type=checkbox name="func" value="0">push
<input type=checkbox name="func" value="0">distribute
<input type=checkbox name="func" value="0">internationalization
I would like to call the calcPrice anytime when radio button or checkbox clicked.
I am using jquery and I know how to call when certain button is clicked.
$("input[name='android']").change(function()
But I would like to call the same function when 'any' button are clicked.
How can I make it ?
Since you may have other input elements in the page, just use a class name to identify them. In my example, I used the class name calc so you can use it to define an on change event.
<script type="text/javascript">
function calcPrice(){
console.log('checked!!'); // note that you missed the quotes here
}
</script>
<input class="calc" type="radio" name="android" value="1">smart
<input class="calc" type="radio" name="android" value="2">tablet
<input class="calc" type="radio" name="android" value="3">both
<input class="calc" type=checkbox name="func" value="0">push
<input class="calc" type=checkbox name="func" value="0">distribute
<input class="calc" type=checkbox name="func" value="0">internationalization
For your JavaScript:
$("input.calc").change(function() {
calcPrice();
});
But I would like to call the same function when 'any' button are
clicked.
You can use Multiple Selector (“selector1, selector2, selectorN”) and add :button selector in existing selector.
$("input[name='android'], input[name='func'], :button").change(function()
An equivalent selector to $( ":button" ) using valid CSS is $(
"button, input[type='button']" ).
Try this,
$("input[name='android'], input[name='func']").change(function(){
});
you can use this
function calcPrice(){
console.log("checked!!");
}
$("input[name='android'],input[name='func']").change(function()
{
calcPrice() ;
});
<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.
.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}
Give all the radio buttons in the group the same name.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>
Below is the my html code:
<input type="checkbox" id="multiOptions" />IsForMultioptions
<input type="radio" value="1" name="option">option1
<input type="radio" value="2" name="option">option2
If I select checkbox i.e. multiOptions then all radio buttons should be convert into checkboxes.
and If I uncheck the checkbox i.e. multiOptions then all checkboxes should convert in radio buttons.
thanks in advance.
You'll need to actually remove and recreate the elements, because IE doesn't let you change the type of an input after it's created.
jQuery makes this fairly easy with replaceWith:
$("selector for the input to change").replaceWith('<input type="checkbox">');
So for instance:
$('input[type="radio"][name="option"]').each(function() {
$(this).replaceWith('<input type="checkbox" name="option" value="' + this.value + '">');
});
Or if the values may contain characters requiring entities:
$('input[type="radio"][name="option"]').each(function() {
var rep = $('<input type="checkbox" name="option">');
rep.attr("value", this.value);
$(this).replaceWith(rep);
});
Instead of replacing the elements you can have two groups of which one is hidden depending on the checkbox:
HTML
<input type="checkbox" id="multiOptions">IsForMultioptions</input>
<div id="radios">
<input type="radio" value="1" name="option">option1</input>
<input type="radio" value="2" name="option">option2</input>
</div>
<div id="checkboxes">
<input type="checkbox" value="1" name="option">option1</input>
<input type="checkbox" value="2" name="option">option2</input>
</div>
jQuery
$(document).ready(function() {
$('#checkboxes').hide();
$('#multiOptions').on('click', function() {
if ($(this).is(':checked')) {
$('#radios').hide();
$('#checkboxes').show();
}
else {
$('#radios').show();
$('#checkboxes').hide();
}
});
});
jsFiddle example.