Clicking label should select radio input
Question
Problem
I'm styling radio inputs on a Google Form, but clicking the label .button__form should select the actual input[type="radio] and add the class is--selected to the label. But if I don't click the actual circle the totalAmount doesn't get calculated, which is a problem.
SOLVED - Also an issue is that right now, the totalAmount of bids is coming up as $Nan instead of an actual number.
scripts.js
/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
/*-------------------------------------
SUM BIDS IN ARRAY
--------------------------------------*/
var arr = spreadsheet.result;
var arrSum = 0;
for (i = 0; i < arr.length; i++) {
arrSum += parseInt(arr[i].Bids);
}
// Print current bid
// var currentBid = parseInt(spreadsheet.result.pop().Bids);
var currentBid = arrSum;
$(".current__amount").html("$" +currentBid);
var baseAmount = 0;
var totalAmount = baseAmount;
var counterArray = [];
$('.button__form').on('click', function() {
var value = $(this).val();
if ($(this).hasClass('is--selected')) {
$(this).removeClass('is--selected');
$(".check--one").css("color", "#ccc");
$(".new__amount").css("margin-left", 10 + "px");
$(".bids__dollar").addClass("is--hidden");
totalAmount = parseInt(totalAmount) - parseInt(value);
counterArray.forEach(function (count) {
if (count && count.reset) {
count.reset();
}
});
$('.total__amount').text("---");
} else {
$(".button__form").removeClass('is--selected');
$(this).addClass('is--selected');
$(".check--one").css("color", "#ffdc00");
totalAmount = currentBid; // Reset totalAmount to baseAmount
totalAmount = parseInt(totalAmount) + parseInt(value);
$('.total__amount').html("$" + totalAmount); // Problem line?
$(".bids__dollar").removeClass("is--hidden");
$(".new__amount").css("margin-left", 0 + "px");
// CountUp
$(function() {
var options = {
useEasing : true,
useGrouping : true,
separator : '',
decimal : '',
prefix : '',
suffix : ''
};
var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
count.start();
counterArray.push(count);
});
}
});
});
index.html (Form snippet)
<section class="bids clearfix">
<div class="bids__info">
<div class="bids__step bids--one">
<h2>Step One</h2>
<div class="bids__checkmark">
<i class="fa fa-check check--one"></i>
</div>
<p class="bids__note">Pick one of the amounts below to add to the current bid.</p>
<!-- Form begins here -->
<form action="https://docs.google.com/a/andrewnguyen.ca/forms/d/1Dtw6KRUS-4y-C8DXB2d-CTHT_FOBrO9v_ZXZFC4oxxU/formResponse" method="POST">
<div class="buttons clearfix" name="entry.1455057699">
<ul class="ss-choices" role="radiogroup" aria-label="Bids"><li class="ss-choice-item"><label class="button__form button__one" for="group_1455057699_1"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="10" id="group_1455057699_1" role="radio" class="ss-q-radio" aria-label="10" required="" aria-required="true"></span>
<span class="ss-choice-label">$10</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__two" for="group_1455057699_2"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="25" id="group_1455057699_2" role="radio" class="ss-q-radio" aria-label="25" required="" aria-required="true"></span>
<span class="ss-choice-label">$25</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__three" for="group_1455057699_3"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="50" id="group_1455057699_3" role="radio" class="ss-q-radio" aria-label="50" required="" aria-required="true"></span>
<span class="ss-choice-label">$50</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__four" for="group_1455057699_4"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="100" id="group_1455057699_4" role="radio" class="ss-q-radio" aria-label="100" required="" aria-required="true"></span>
<span class="ss-choice-label">$100</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__five" for="group_1455057699_5"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="250" id="group_1455057699_5" role="radio" class="ss-q-radio" aria-label="250" required="" aria-required="true"></span>
<span class="ss-choice-label">$250</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__six" for="group_1455057699_6"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="500" id="group_1455057699_6" role="radio" class="ss-q-radio" aria-label="500" required="" aria-required="true"></span>
<span class="ss-choice-label">$500</span>
</label></li></ul>
</div><!-- /.buttons -->
<div class="bids__amounts">
<div class="bids__amount bids__current">
<p class="bids__note">The last bid was</p>
<h4 class="current__amount">---</h4>
</div>
<div class="bids__amount bids__new">
<p class="bids__note">Your bid will be</p>
<h4 class="bids__dollar is--hidden">$</h4><h4 class="new__amount total__amount" id="count">---</h4>
</div><!-- /.bids__amount -->
</div><!-- /.bids__amounts -->
</div>
<div class="bids__step bids--two">
<h2 class="bids__form">Step Two</h2>
<div class="bids__checkmark">
<i class="fa fa-check check--two"></i>
</div>
<p class="bids__note bids__warning">Fill out the form below. Fields with an asterisk <span class="form__asterisk">(*)</span> are mandatory.
<fieldset class="form__wrapper">
<div class="input__row">
<legend>Full Name</legend>
<label for="first-name">Full Name <span class="form__asterisk">*</span></label>
<input class="input__full" id="first-name" name="entry.993143629" type="text" required="" aria-required="true" autocomplete="off">
<legend>Address*</legend>
<label for="mailing-address-1">Address <span class="form__asterisk">*</span></label>
<input class="input__address" class="form__mailing" id="mailing-address-1" name="entry.703646201" type="text" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__row">
<div class="input__group input--half input__group--city">
<label for="city">City <span class="form__asterisk">*</span></label>
<input class="input__city" id="city" name="entry.250562623" type="text" placeholder="Brandon" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__group input--quarter input__group--province">
<label for="province">Province <span class="form__asterisk">*</span></label>
<select name="entry.1321194614" class="input__province" aria-label="Province " aria-required="true" required=""><option value=""></option>
<option value="" disabled> - Provinces - </option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
<option value="" disabled> - States - </option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option></select>
</select>
</div>
<div class="input__group input--quarter input__group--zip">
<label for="zip">Postal Code <span class="form__asterisk">*</span></label>
<input class="input__zip" id="zip" name="entry.1010716867" type="text" required="" aria-required="true" autocomplete="off">
</div>
</div>
<div class="input__row">
<div class="input__group input--half input__group--email">
<legend>Contact</legend>
<label for="first-name">Email <span class="form__asterisk">*</span></label>
<input class="input__email" id="email" name="entry.1265248848" type="text" autocapitalize="off" autocorrect="off" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__group input--half input__group--phone">
<label for="last-name">Phone Number <span class="form__asterisk">*</span></label>
<input class="input__number" id="number" name="entry.433465949" type="text" required="" aria-required="true" autocomplete="off">
</div>
</div>
<div class="input__group input__checkbox">
<ul class="checkbox__list">
<li>
<input class="checkbox" type="checkbox" name="checkbox" value="checkbox" autocomplete="off">
<label for="checkbox" class="form__notifications"><i class="fa fa-bell"></i> Receive an SMS notification when you are outbid</label>
</li>
</ul>
</div>
</fieldset>
<button class="button__submit is--disabled">Submit</button>
</form>
</div>
</div>
</section>
1 answers
solution1
1 ACCPTED 2015-12-24 05:27:31
Here you are trying to get value from the label which has button__form class which is wrong, You have to get value from the radio button which is inside that label, So try following code for get value other code will be as it is.
$('.button__form').on('click', function() {
var value = $(this).find("input[type='radio']").val();
});
It may help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to Select Radio Button When Clicking Label & Pass Data to URL?
How to select element inside label on input radio select
Getting a radio button immediately by clicking a label with jQuery
Toggle HTML radio button by clicking its label
Radio buttons do not check when clicking the label
get label for for a check input radio
Change input property by clicking on a label
Change input select to radio
AngularJS: Select radio button by clicking on outer element
How to select radio button by clicking its div?
Related Tags