I try to get the value of the checked radio button by javascript.
<input value="3" type="RADIO" name="ME" onclick="go_to_url ( 'OPT3' , this.value );">
But JS does not give me any value even the event is where the button is?
Why?
How can I get the value of the clicked radio button in a way I do not have to change the function?
This code has no problem.
Check this out
<input value="3" type="radio" name="ME" onclick="go_to_url( 'OPT3' , this.value );">
function go_to_url(label, value) {
console.log(label);
console.log(value);
}
https://jsfiddle.net/f7gkesxo/
Use for your button an id then you can use document.getElementById to get your element and addEventListener to add an click-event. The on-click in your HTML delete.
document.getElementById('btn').addEventListener('click', function() {
console.log(this.value);
})
<input value="3" id='btn' type="RADIO" name="ME">
document.querySelector('input[type="radio"]').addEventListener('click', function() {
go_to_url('OPT3' , this.value);
});
Related
i am submitting data through FormData and i am trying to alert values of check boxes which are checked in my form, right now i am able to make it work for only one check box.
how can i alert values of all those check boxes which are checked.
var formData = new FormData(document.getElementById("update-form"));
$("#myCheckbox1").on('change',function(){
if($("#myCheckbox1").is(':checked'))
$('#hiddenInput1').val(1);
else{
$('#hiddenInput1').val(0);
}
});
alert(
$('#hiddenInput1').val()
);
Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa1" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
How to Alert Values of all check boxes which are checked in FormData without repeating code. i found similar example online but none were using FormData.
Form Name is : update-form
You can make use of start with attribute selector to select all checkboxes having id start with myCheckbox and attach it to change event handler.
Inside handler, you can read if checkbox is checked or not and change value of hidden input which is placed before checkbox.
See below code
$(function(){
$("input[type=checkbox][id^=myCheckbox]").on('change',function(){
var isChecked = $(this).is(':checked');
var $hiddenInput = $(this).prev('input[type=hidden]');
if(isChecked)
$hiddenInput.val(1);
else{
$hiddenInput.val(0);
}
alert($hiddenInput.val());
});
//iterate all hidden input on form submit
$('#update-form').submit(function(){
$('input[id^=hiddenUnput]').each(function(){
alert($(this).val());
});
$(this).submit();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Exammple Check Box 1:
<input type="hidden" value="0" name="visa" id="hiddenInput1">
<input type="checkbox" value="1" id="myCheckbox1">
Example Check Box 2:
<input type="hidden" value="0" name="visa" id="hiddenInput2">
<input type="checkbox" value="1" id="myCheckbox2">
I am writing code for radio buttons where there are 3 radio buttons like YES, NO and ALL. I am using same class name for all the 3 and also binding a value for them. If user clicks on one of the three Am able to pass the corresponding value on onclick event but my problem is how to know whether user clicks on which radion button among the three buttons like if user clicks on 'All' radio button I want to perform some type of action else if user clicks on 'Yes' option then some different action, etc. how to know user clicks on which radio button? mycode is below:
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">No
I need radio button value along with user clicked on which radio button. how to achieve this? Can anyone please guide me.
I have added my class names(all, yes, no) in those html elements
<input type="radio" name="select_option" class="select_option all" value="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option yes" value="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option no" value="<?=$row_id;?>">No
Using jQuery
$(document).ready(function(){
$("input:radio").click(function(e){
if($(this).hasClass("all"))
{
console.log("which button -> all");
console.log("value="+$(this).val());
}
else if($(this).hasClass("yes"))
{
console.log("which button -> yes");
console.log("value="+$(this).val());
}
else if($(this).hasClass("no"))
{
console.log("which button -> no");
console.log("value="+$(this).val());
}
});
});
FIDDLE
Please add an extra parameter for storing the 'id' inside the input box, just like this:
<input type="radio" name="select_option" class="select_option" value="all" data-id="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option" value="yes" data-id="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option" value="no" data-id="<?=$row_id;?>">No
Now, here is the script which will run after checking the radio button:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.select_option').click(function() {
if ($(this).prop('checked')) {
var id = $(this).data('id');
var value = $(this).val();
}
alert(value);
});
});
</script>
I hope, this may be useful to you.
try this
$(".select_option").change(function(){
var radioValue = $("input[name='select_option']:checked").val();
if(radioValue){
alert("Your are clicked - " + radioValue);
}
});
$(".select_option").change(function () {
if ($(this).is(":checked")) {
var value = $(this).val();
console.log(value);
}
});
fiddle
I still learning javascript, i think this is ez question, but i can't fix it with my experience (already try search some source), this my code
This is example:
PHP
<?php
<input type="checkbox" checked="checked" value="1" class="box_1">1</label> // checked
<input type="checkbox" value="2" class="box_1">2</label> //unchecked
<input type="checkbox" checked="checked" value="3" class="box_1">3</label> // checked
<input type="checkbox" value="4" class="box_1">4</label> //unchecked
<input type="checkbox" checked="checked" value="5" class="box_1">5</label> // checked
<input type="button" value="Submit" id="button-price" class="button" />
?>
I try check the check box with javasript by class, (i can't use by name&id because i use looping)
I try build condition like this Javascript :
$('#button-price').bind('click', function() {
var box = '';
$(".box_1").each(function(){ // for each checkbox in class box_1(1-5)
if(this).attr("checked","true"){ // if this checked box is true
var value = (this.value).toLowerCase(); // take the value
box = box + value; // store to box
}
});
});
when click button then take value and store to box,
I know there error in here if(this).attr("checked","true"){
what it should be writing the condition?
Try using prop instead of attr
if($(this).prop('checked')) {
}
Hope this helps.
You can use the jQuery .prop() method to check the checkbox state:
if ($(this).prop("checked")) { // if this checked box is true
box += $(this).val().toLowerCase(); // store to box
}
Suggestion: (this.value).toLowerCase() will work but try not mixing up jQuery code with pure javascript. Instead of it you can use the solution above.
I want to get the value of selected radio button.
When no radio is selected it shows undefined correctly. However, when i click on any radio button also it shows undefined.
How can i do this in either javascript or jquery.
HTML code:
<div id="rates">
<input type="radio" class="demo" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" class= "demo"id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" class="demo" id="r3" name="rate" value="Multi Rate"> Multi Rate
</div>
JS:
console.log($('.demo:selected').val());
Fiddle: http://jsfiddle.net/eLJ4s/1/
You need to register a change event, your current console.log is only at run-time, when nothing is checked:
$(":radio[name=rate]").change(function() {
console.log(this.value);
});
try this something like this..
$('#element').click(function() {
if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
You'd have to bind the click event of the checkbox, as the change event doesn't work in IE.
$('#radio_button').click(function(){
// if ($(this).is(':checked')) alert('is checked');
alert('check-checky-check was changed');
});
Now when you programmatically change the state, you have to trigger this event also:
$('#radio_button').attr("checked", "checked");
$('#radio_button').click();
You can change your code accordingly below is the sample
Working samples :
select-a-radio-button-with-jquery
check-if-radio-button-is-checked
$(function(){
$("input[type='radio']").change(function(){
alert($(this).val());
});
});
Given a set of radio buttons, like:
<input id="B_1" type="radio" name="radioName" value="1">
<input id="B_2" type="radio" name="radioName" value="2">
<input id="B_3" type="radio" name="radioName" value="3">
<input id="B_4" type="radio" name="radioName" value="4">
​When one of them gets checked is it possible to know which was previously active (if there is one)?
I tried to attach the following function to the onclick event, but it doesn't work because it returns the the presently selected radio button instead of the one that was selected before:
my_func = function() {
var checkedValue = $('input[type=radio]:checked').val();
return alert("The previously selected was: " + checkedValue);
};
I don't know if could be of any help, anyway here's the complete attempt: http://jsfiddle.net/H6h4R/
Try this - http://jsfiddle.net/H6h4R/1/
$(":radio").on("mousedown", function() {
$("p").text( $('input[type=radio]:checked').val() );
}).on("mouseup", function() {
$('input[type=radio]').prop('checked', false);
$(this).prop('checked', true);
});
The click event is only triggered after this exact series of events:
The mouse button is depressed while the pointer is inside the element.
The mouse button is released while the pointer is inside the element.
if he uses keyboard key this can help with that
http://jsfiddle.net/DYrW3/73/
$('input[name=radios]').keydown(function(){
alert("Before change "+$('input[name=radios]:checked').val());
})