can not get value from radio button using jquery - javascript

I try to get value from radio button, here's my code:
var isactive = result.IsActive;
$("input[name='RadioActive']").each(function () {
if ($(this).val() == isactive) {
$(this).attr("checked", "checked");
}
});
and the html :
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
Doesn't work. Do you have any Idea ? What am I Missing ?

To select a radio button using jquery use prop.
In the below snippet expecting the value of result.IsActive to be F & assigning it to isactive
var isactive = "F";
$("input[name='RadioActive']").each(function() {
if ($(this).val() == isactive) {
$(this).prop("checked", "checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>

var isActive='F';
$("input[name='RadioActive']").each(function (index,value) {
if( $(value).val()==isActive)
$(value).attr('checked','checked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>

The problem is that result.IsActive isn't resolving. Simply setting isactive to either T or F will check the radio button for you:
var isactive = "T";
$("input[name='RadioActive']").each(function() {
if ($(this).val() == isactive) {
$(this).attr("checked", "checked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
No
</label>
</div>
</section>
Note that setting it to true or false will not trigger the checked attribute; it needs to equal the value of the radio button exactly (which are T and F respectively).
Ensure that your result.IsActive returns either T or F, and it will work correctly for you.
Hope this helps! :)

You can use something like below
$("input[name='RadioActive']:checked").val()

Here is your JavaScript code:
$(document).ready(function () {
$('#myForm').on('click', function () {
var value = $("[name=RadioActive]:checked").val();
alert("Selected Radio Value is : " + value);
})
});
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form id="myForm">
<section class="col col-lg-2">
<label class="label">Active</label>
<div class="inline-group">
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="T" />
<i></i>
Yes
</label>
<label class="radio">
<input type="radio" name="RadioActive" class="RadioActive" value="F" />
<i></i>
No
</label>
</div>
</section>
</form>
</body>
</html>
and here is a working plunker for the code:
https://plnkr.co/edit/D9UaU43OxHGUg80xxsiS?p=preview

Related

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

Get value from radio button

I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing

Check radio button if

I want to select a radio button depending on an input field. This seems very simple but its not working. Basically a user fills out a form and depending on the state input field, it picks the state tax radio button.
The code below is not firing for some reason, any idea's?
The input field
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" onblur="picktax();" required />
</div>
</div>
The radio button
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
The script
<script>
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} elseif (statevalue == livalue) {
$("#radio3").prop("checked", true)
} elseif (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
</script>
updated, still not firing
Your example shows that you are new to JavaScript so whilst I wouldn't code it quite like this myself here's your code corrected enough to work.
As mentioned in the comments there is no elseif keyword in JS and you must use double or triple equals operator for evaluating.
Nethertheless, you were getting close to something workable.
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} else if (statevalue == livalue) {
$("#radio3").prop("checked", true)
} else if (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" oninput="picktax();" required />
</div>
</div>
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
As pointed in the comments, your code has some syntax errors. Also, there are a few ways you could improve it, for example I use a switch instead of if. Nothing wrong with if, I'm just providing an example. Fixed code would be:
function picktax() {
var statevalue = $('#state').val();
var radio = $();
switch (statevalue) {
case "NY":
radio = $("#radio2");
break;
case "LI":
radio = $("#radio3");
break;
case "NJ":
radio = $("#radio4");
break;
default:
alert("test");
break;
}
radio.prop("checked", true);
}

AngularJs Input radio value

I've got a form where a user has to say if he is male or female. In my database it's a 1 or 0. How could I make this with AngularJs input radio.
Right now I've got this:
<div class="form-group">
<label class="col-md-2 control-label">Radios</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" name="male" id="male" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span>
Male
</label>
</div>
<div class="radio radio-primary">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios4" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span>
Female
</label>
</div>
</div>
</div>
But this is not working. The right radio button is not selected also the value won't change.
Run the code and see is this what you expect.
Use same name for radio button, and you can use different id for each controller.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="">
<div class="form-group">
<label class="col-md-2 control-label">Radios</label>
<div class="col-md-10">
<div class="radio radio-primary">
<label>
<input type="radio" id='gender_male' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="0"><span class="circle"></span><span class="check"></span>
Male
</label>
</div>
<div class="radio radio-primary">
<label>
<input type="radio" id='gender_female' name="gender" ng-model="employeeCtrl.employee.Gender" ng-value="1"><span class="circle"></span><span class="check"></span>
Female
</label>
</div>
</div>
Gender: {{employeeCtrl.employee.Gender}}
</div>
</body>
</html>

Change alphabet when select radio button

When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>

Categories