Get value of checked radio button in jQuery - javascript

I have some questions with answers. I want to store the checked off answer in a variable. Each answer is as a radio button. For example:
<h4 class='ques1'>Question one here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here here</h4>
<div class="checkbox">
<label>
<input type="checkbox"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> answer 2
</label>
</div>
Then I have variables set up to store the checked answer….
var ques1Answer, ques2Answer;
I'm not sure if you need to query the label tag or the input tag to get the value. But this is what I've tried:
$('h4.ques1 div.checkbox label input').on('change', function(){
ques1Answer = $(this).val();
});

First of your selector is wrong 'h4.ques1 div.checkbox label input'
the DIV is not a child of h4.ques1 so use:
$('div.checkbox label input')
if you use .val() that implies that actually you have an value attribute otherwise you'd better assign some name attributes:
<input type="checkbox" name="Question-A-1">
<input type="checkbox" name="Question-A-2">
so even if you get the "on" / "off" (default values) you'll always know what's the name entity those values are referring to.
Worth noting that if only one answer is possible-per-question than you might want to use Radio Buttons instead
<input type="radio" name="Question-A" value="1">
<input type="radio" name="Question-A" value="2">
in that case it makes sense to hold inside your vars only one value-per-question.
Than wrap all your questionnary inside a <form> and use .serialize() fo get all the answers:
$("button").click(function(){
alert( $("form#questionnary").serialize() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="questionnary">
<h4 class='ques1'>Question one here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-A" value="2"> answer 2
</label>
</div>
<h4 class='ques2'>Question two here</h4>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="1"> answer 1
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" name="Question-B" value="2"> answer 2
</label>
</div>
</form>
<button>TEST RESULTS</button>

Related

Javascript: Input type radio

How can I select input type radio by just clicking the space around it?
You could use a <label> tag:
<input type="radio" name="box" id="box">
<label for="box">Your content here</label>
Clicking on the label toggles the input.
You should be using the label element. There are two ways to use it with a radio button, as shown below.
<form>
<label>
<input type="radio" name="options">
<span>Option 1 - Inside Label</span>
</label>
<br>
<input type="radio" name="options" id="button2">
<label for="button2">
<span>Option 2 - Outside Label</span>
</label>
</form>

form validation: check that multiple checbox and radio buttons are selected

I'm building a form that has a lot of conditional paths.. for instance..
Q1.a -> triggers the appearance of question 3
Q1.b -> triggers the appearance of question 2
Q1.c -> skips all the way to question 16
All the questions are required if they're visible to the form user. This being the case I can't just put required in the inputs in case it's one that doesn't get shown.
I've been applying my "required" class in this fashion
$('.question2-a').click(function() {
$(".question3").toggle();
$(".question3").addClass("required");
$(".question4").toggle();
$(".question4").addClass("required");
$(".question5").toggle();
$(".question5").addClass("required");
});
$('.question2-b').click(function() {
$(".question5").toggle();
$(".question5").addClass("required");
});
In this way only questions that I know appeared get a class of required.
I now need to do a look-up of all the required inputs that appeared and ensure they were properly selected.
So far I have this...
$('#PWLE').submit(function() {
if ($('.required input:checkbox', this).is(':checked') && $('.required input:radio', this).is(':checked')) {
// everything's fine...
}
else {
alert('Please fill out all required fields');
return false;
}
});
This isn't really doing the trick because as soon as one checkbox and radio are selected the if is satisfied and the form will submit.
Is there a way I can loop through my required class to ensure that if statement logic is running on all of them?
Snippet of HTML Form
<!-- Question #2 -->
<div class="form-group question2">
<p><b><span class="req-notice">*</span>Have you received a newsletter in the past two years?</b></p>
<div class="form-check question2-a">
<input class="form-check-input" type="radio" value="Yes" id="2261_9466_4_42752_1" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_1">
Yes
</label>
</div>
<div class="form-check question2-b">
<input class="form-check-input" type="radio" value="No" id="2261_9466_4_42752_2" name="2261_9466_4_42752">
<label class="form-check-label" for="2261_9466_4_42752_2">
No
</label>
</div>
</div>
<!-- End of Question #2 -->
<!-- Question #3 -->
<div class="form-group question3">
<p><b><span class="req-notice">*</span>When did you register for the newsletter? (choose only ONE)</b></p>
<div class="form-check">
<input class="form-check-input" type="radio" value="In the past 6 months" id="2261_9466_5_42753_1" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_1">
In the past 6 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 6 to 12 months" id="2261_9466_5_42753_2" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_2">
Between 6 to 12 months
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="Between 1 to 2 years" id="2261_9466_5_42753_3" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_3">
Between 1 to 2 years
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="More than 2 years" id="2261_9466_5_42753_4" name="2261_9466_5_42753">
<label class="form-check-label" for="2261_9466_5_42753_4">
More than 2 years
</label>
</div>
</div>
<!-- End of Question #3 -->
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".q1.required").click(function(){
if(this.value == "yes"){
$("#div3").show();
$("#div3 :input").prop('required',true);
}
else{
$("#div3").hide();
$("#div3 :input").prop('required',false);
}
});
});
</script>
</head>
<body>
<form action="" method="">
<div id="div1">
<label><b>Question 1</b></label>
<input name="q1" class = "q1 required" type="radio" value = "yes" required>
<input name="q1" class = "q1 required" type="radio" value = "no" required>
<br>
</div>
<div id="div2">
<label><b>Question 2</b></label>
<input id="q2" name="q2" class = "required" type="radio" value = "no" required>
<input id="q2" name="q2" class = "required" type="radio" value = "yes" required>
<br>
</div>
<div id = "div3" style="display:none;">
<label><b>Question 3</b></label>
<input id="q3" name="q3" class = "" type="radio" value = "yes">
<input id="q3" name="q3" class = "" type="radio" value = "no">
<br>
</div>
<button>Submit</button>
</form>
</body>
</html>
You can use required attribute instead of class for enabling automatic validation on click of submit/button.
Keep class "required" just for triggering the click event.
Refer the code above :
I have displayed 2 questions,and on click of "yes" of first question I display third question and set the input attribute as required and then if you click "no" then I hide the question and remove the 'required' attribute.
This code is a working example, feel free to run it and check.

Get radio button label from different radio button groups and append to division

There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later

adding values to determine answer using angularjs

I asked this question a few days ago but I did a poor job of describing the specifics so I'm posting it again in greater detail.
Goal:
user to fill out survey with a list of questions and answers to choose from and the results would show a conditional page/div section based on the users selections. If the user selects an answer that is of the same value more times then any other value then show specific content based on the users selection. Here's a plunker that has the questions and answers.
http://plnkr.co/edit/FtL8arjcHPUEbs4r1BJS?p=preview
<div class="form-group" ng-repeat="q in questions">
<label>{{q}}</label>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="1">blue
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="2">red
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="1" ng-model="formData[$index]" value="3">grey
</label>
</div>
</div>
<div class="form-group" ng-repeat="q1 in questions">
<label>{{q1}}</label>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="1">something else
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="2">something in here
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="2" ng-model="formData[$index]" value="3">something else in here
</label>
</div>
</div>
<button ng-click="stats()">show results</button>
<ul>
<li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li>
</ul>
right now I'm lacking the logic to show the conditional div content on the results page based on the users selections.
I'm also down for other solutions to achieve this goal too.
thanks!
Use ng-show or ng-if directives.
You need somethink like this:
<div ng-if="someFoo()">some content</div>
And in js:
$scope.someFoo = function () {
return true; // or calculate any other results
}

how to show/hide a div on the basis of a checkbox selection in angular js

I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.
Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>
I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle
<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>
Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>

Categories

Resources