How to use if..else statement on a radio button with jQuery - javascript

I have this field at my form for calculating Value Added Tax:
<form method="post" action="" id="form-product">
<div class="col-md-4">
<div class="form-check">
<input class="form-check-input" type="radio" id="vat" name="vat" value="on">
<label class="form-check-label">
Calculate VAT
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="vat" name="vat" value="off" checked>
<label class="form-check-label">
Do not calculate VAT
</label>
</div>
</div>
</form>
Now within jQuery, I want to check that if the radio button is set to the value on, do the calculation.
So how can I do that with jQuery.
I would really appreciate any idea or suggestion from you guys...
Thanks in advance.

I have added a listener to get the value from the radio button.
$('#form-product input').on('change', function() {
alert($('input[name=vat]:checked', '#form-product').val());
});
Here's an example:
for more info in Jquery refer to this question

Related

multiple checkboxs required to click submit js conditionals

I am currently trying to make a form where multiple things are required like name email etc i am not having any trouble sorting those ones out but when it comes to the check boxes i struggle to figure out how to make it so that two or more checkboxes are required to the submit the form this is the way i have been trying to do it. after checkbox.value i have tried <2. also here is the code for the checkboxes in html.
if (checkbox.value ) {
messages.push('Two intrests must be selected')
}
<div class="form-check form-check-column">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>
You can add a simple id to container of checkbox then for each checked checkbox plus a counter +1 for check if is equal or plus 2 like:
function Check()
{
var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
//You can use short without var like document.getElementById('container').querySelectorAll('input[type="checkbox"]')
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch >= 2){
console.log('ok');
}else{
console.log('MUST BE 2 or +');
}
}
<div class="form-check form-check-column" id="container">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Sports" id="Box" value=1> Sports
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Reading" id="Box" value=1> Reading
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Hacking" id="Box" value=1> Hacking
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Gaming" id="Box" value=1> Gaming
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="Other" id="Box" value=1 > Other
</label>
</div>
<button onClick="Check();">simulate form</button>
obviously you will change my console.log with an action like alert if is not ok and form submit if is ok (remember to use event.preventdefault() for prevent submit before check if all is ok)
var howmuch = 0;
var container = document.getElementById('container');
var checkbox = container.querySelectorAll('input[type="checkbox"]');
checkbox.forEach(function(item) {
if(item.checked){howmuch += 1}
});
if(howmuch < 2){
messages.push('Two to three intersts must be selected')
} else if (howmuch > 3) {
messages.push('You can only select three intrests max')
}

One div's checkbox input affecting another div's checkbox input

I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?
I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>

Jquery does not catch unchecking of radio-button

I am builing a multi-step form.
Here is part of it:
<div class="form-group">
<div class="form-check">
<input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
<label for="1-1">Radio button 1-1</label>
</div>
<div class="form-check">
<input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
<label for="1-2">Radio button 1-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-1" id="textarea-1" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="2-1" class="form-check-input" type="radio" name="secondRadioGroup">
<label for="2-1">Radio button 2-1</label>
</div>
<div class="form-check">
<input id="2-2" class="form-check-input" type="radio" name="secondRadioGroup" data-show="#textarea-2">
<label for="2-2">Radio button 2-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-2" id="textarea-2" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="checkbox-1" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="form-check">
<input id="checkbox-2" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="form-check">
<input id="checkbox-other" class="form-check-input" type="checkbox" name="secondRadioGroup" data-show="#textarea-3">
<label for="checkbox-other">Other</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-3" id="textarea-3" cols="30" rows="10" style="display: none"></textarea>
</div>
And here is my JS :
$("[data-show]").change(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
What's the problem:
With checkbox it works fine. Showing and hiding on checking/unchecking the checkbox.
With radio buttons it works fine on the show, but it's not hiding on changing from current group of radio buttons.
Here is JSFiddle
EDIT 1:
What I need with radio button groups:
If I check radio-button with
name="radio_group_1" data-show="#id-of-textarea"
a textarea with
id="id-of-textarea"
shows up. If after this I check another radio-button from the same group
name="radio_group_1" NO DATA-ATTRIBUTE HERE
the textarea hides.
The jQuery logic is wrong. Working: https://jsfiddle.net/vutpcu0g/5
You should check the change event on all radios, not just the data-show ones. Then, select the nearest sibling radio to toggle the data-show element.
$("[type=radio],[type=checkbox]").change(function(){
if($(this).is(":checked") && $(this).data("show")) {
$($(this).data('show')).show();
} else {
var sib= $(this).parents('.form-group').find('[data-show]');
$(sib.data("show")).hide();
}
});
You have some errors in your code.Use this script.
$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
});
Fiddle: https://codepen.io/smitraval27/pen/XEpGNR
In your code you have not given [data-show] to every radio button. Plus on change of radio you have to use each to find out the changes of each and every radio.

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

Default checked button

Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=tru‌​e;
Thank you Pandiyan Cool

Categories