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);
}
Related
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>
I have 2 groups of checkbox options on same page. below is the code.
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" />
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" />
</label>
</div>
Now,
User can select first 3 check boxes but clicking the 4th (last) one should
select the 4th (last) one and deselect all other of the set. Same should
happen for all checkbox sets.
Example : User can select A,B,C checkbox at a same time but when he checks D
all the above selected checkboxes should get unselected. Similarly for E,F,G
and H. I hope I am clear now.
Please help me on this. I hope I am clear, if not please do let me know
The below code section should work according to your requirement
$(document).ready(function() {
$('.checkbox1').on('click', function() {
var last_chekbox1 = $('.checkbox1:last');
if (last_chekbox1.is(':checked')) {
$('.checkbox1').prop('checked', false);
$(this).prop('checked', true);
}
});
$('.checkbox2').on('click', function(e) {
var last_chekbox2 = $('.checkbox2:last');
if (last_chekbox2.is(':checked')) {
$('.checkbox2').prop('checked', false);
$(this).prop('checked', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="1" th:text="borrower1" class="checkbox1" /> A
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="2" th:text="borrower2" class="checkbox1" /> B
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="3" th:text="borrower3" class="checkbox1" /> C
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerRace1}" th:value="4" th:text="borrower4" class="checkbox1" /> D
</label>
</div>
<hr>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity1}" th:value="1" th:text="Ethnicity1" class="checkbox2" /> E
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity2}" th:value="2" th:text="Ethnicity2" class="checkbox2" /> F
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity3}" th:value="3" th:text="Ethnicity3" class="checkbox2" /> G
</label>
</div>
<div class="col-xs-12">
<label class="checkbox-inline">
<input type="checkbox" th:field="*{borrowerEthnicity4}" th:value="4" th:text="Ethnicity4" class="checkbox2" /> H
</label>
</div>
$('checkbox1').on('click'function(){
$('checkbox').attr('checked',false)
$(this).attr('checked',true)
})
try something like this
I want to validate all the fields in my form using angularjs. All the other functionalities I wanted in my form are working fine, Its just the form validation which is not working at all. Since I am new to angularjs, I've tried almost everything and have no idea on what I am missing here.
Here is the code below
<div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.author.$error.required && !commentForm.author.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="author" id="author" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.author.$error.required && !commentForm.author.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comment.$error.required && !commentForm.comment.$pristine}">
<label for="comment" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comment" name="comment" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comment.$error.required && !commentForm.comment.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
</div>
Javascript Code
'use strict';
angular.module('confusionApp', [])
.controller('DishCommentController', ['$scope', function($scope) {
$scope.dishComment = {author:"",rating:"5",comment:"",date:""};
$scope.submitComment = function () {
//Step 2: This is how you record the date
$scope.dishComment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
if($scope.dishComment.comment == "") {
console.log = "incorrect"
}
else {
$scope.dish.comments.push($scope.dishComment);
$scope.dishComment = {author:"",rating:"",comment:"",date:"" };
$scope.commentForm.$setPristine();
}
}
}])
;
I want my selectbox to be enabled when the radio button is checked. My code works for this. But if I choose other option. My selectbox didn't change into disabled.
Here's my code:
HTML
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio">
<p>Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio">
<p>SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio">
<p>Colok Jitu</p>
<select disabled>
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
For Javascript
var jitu = document.getElementsByClassName('jitu');
for(var i = 0; i < jitu.length; i++){
jitu[i].addEventListener('change', function(){
(this.checked) ? this.parentNode.children[2].disabled = false : this.parentNode.children[2].disabled = true;
});
}
Thanks for those who will help. Cheers!
JSfiddle : https://jsfiddle.net/c3a2q3n8/
You should give each input add a class name 'jitu'
If your html is not dynamically generated then you can slightly modify your html like this
Note that I have added a onclick function for each radio input and a unique value attribute.
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="1">
<p>
Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="2">
<p>
Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="3">
<p>
Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="4">
<p>
Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="5">
<p>
SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="6">
<p>
Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio" onclick="handleClick(this);" value="7">
<p>
Colok Jitu</p>
<select disabled id="jitusl">
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio" onclick="handleClick(this);" value="8">
<p>
4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
Now you have to place this handleClick() in js and check for specific value to either enable/disable it.
<script type="text/javascript">
function handleClick(myRadio) {
alert('New value: ' + myRadio.value);
if (myRadio.value === "7") {
document.getElementById('jitusl').disabled = false;
}
else {
document.getElementById('jitusl').disabled = true;
}
}
</script>
The problem is that when you click on the other options, the trigger isn't fired because the focused item isn't the one that you wrote the function for.
You should make a function that is triggered on change of every option, beware of the radio button so it knows whether to disable or enable it.
var inputs = document.getElementsByTagName('input');
var selectInput = document.getElementById('dropdownSelect');
for(var i = 0; i < inputs.length; i++){
var input = inputs[i];
if(input.type!='radio') continue;
input.addEventListener('change', function(){
var isJitu = ( this.className && this.className.match(/jitu/) )? true : false;
selectInput.disabled = !isJitu;
});
}
<div class="flex">
<div class="first">
<label class="group">
<input name="sg-a" type="radio">
<p>Ganjil - Genap 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Besar - Kecil 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Tengah - Tepih 2D</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Kombinasi 2D</p>
</label>
</div>
<div class="second">
<label class="group">
<input name="sg-a" type="radio">
<p>SHIO</p>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>Over / Under</p>
</label>
<label class="group">
<input class="jitu" name="sg-a" type="radio">
<p>Colok Jitu</p>
<select disabled id="dropdownSelect">
<option>As</option>
<option>Kop</option>
<option>Kepala</option>
<option>Ekor</option>
</select>
</label>
<label class="group">
<input name="sg-a" type="radio">
<p>4D</p>
</label>
</div>
<input type="submit" value="Cari Data">
</div>
I've added a global variable (currentSelect) to track the current active select and used the click event rather than the change event since change fires at different times for different browsers. I'm also attaching the event to all your radio buttons instead of just the one with the select otherwise it will not fire when a different radio is selected (and also in case you wanted to add more selects)
var currentSelect;
function setupClickHandlers() {
var jitu = document.getElementsByName('sg-a');
for(var i = 0; i < jitu.length; i++){
jitu[i].addEventListener('click', function() {
if (currentSelect) {
currentSelect.disabled = !currentSelect.parentNode.children[0].checked;
}
if (this.parentNode.children[2]) {
currentSelect = this.parentNode.children[2]
currentSelect.disabled = !this.checked;
}
});
}
}
I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>