Reputation: 1436
Getting the error Looks like you have a question or two that still needs attention
when submitting a Google Form because it doesn't recognize if a button has been selected and its corresponding values since their form uses radio inputs.
Scroll down past the header to see the unstyled radio inputs below my buttons
Seeing as I have my buttons styled the I want them to, when I click on .button__form
it should .prop(checked, true)
to make Google's radio input on the form checked, ie If you click on the $10 button, it should make the radio input for $10 checked
Alternatively, I should style my radio inputs as fake buttons, but I'm not convinced that this route is the right way to fix this problem
<ul class="ss-choices" role="radiogroup" aria-label="Bids "><li class="ss-choice-item"><label><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><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><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><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><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><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>
$(function(){
/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
// Print current bid
var currentBid = parseInt(spreadsheet.result.pop().Bids);
$(".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 the totalAmount to base
totalAmount = parseInt(totalAmount) + parseInt(value);
$('.total__amount').html("$" + totalAmount);
$(".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);
});
}
});
});
/*-------------------------------------
STEP TWO: CONTACT FORM
--------------------------------------*/
// Has the form been filled up?
function validate(){
var invalids = $('input, select').filter(function(){
return !this.value.trim();
});
// Get two dates
var currentDate = new Date();
var endDate = new Date("1/14/2016 17:00:00");
// To turn milliseconds into days, divide the number by 86400000
// To turn milliseconds into hours, divide the number by 3600000
var remainingHours = ((endDate - currentDate) / 3600000).toFixed(2);
if (invalids.length === 0 && remainingHours > 0) {
// Enable button only if the form is filled, auction ongoing
$(".button__submit").removeClass("is--disabled");
$(".button__submit").addClass("is--active");
$(".check--two").css("color", "#ffdc00");
} else {
$(".button__submit").removeClass("is--active");
$(".button__submit").addClass("is--disabled");
$(".check--two").css("color", "#ccc");
}
}
// Validate form on keyup
$('input').on('keyup', validate);
$('select').on('change', validate);
/*-------------------------------------
SWEET ALERT
--------------------------------------*/
// You will only be able to click if form is filled, hence no if-statement
$(".button__submit").on("click", function(){
swal({
title: "Thanks for bidding!",
text: "You will be notified if you've placed the winning bid.",
type: "success",
confirmButtonColor: '#ffdc00',
});
});
/*-------------------------------------
STICKY NAVIGATION
--------------------------------------*/
var nav = $("nav");
$(window).scroll(function(){
if ($(this).scrollTop() > 630 ) {
nav.addClass("is--sticky");
} else {
nav.removeClass("is--sticky");
}
});
/*-------------------------------------
AUDIO
--------------------------------------*/
var audio = document.getElementById("painter");
$(".audio__play").click(function(){
console.log("Clicked");
if (audio.paused === true) {
$(this).removeClass("fa-play");
$(this).addClass("fa-pause");
audio.play();
} else {
$(this).removeClass("fa-pause");
$(this).addClass("fa-play");
audio.pause();
}
});
// Timestamp displays time elapsed
audio.addEventListener("timeupdate", function() {
var timeline = document.getElementById("audio__timestamp");
var seconds = parseInt(audio.currentTime % 60);
var minutes = parseInt((audio.currentTime / 60) % 60);
// Progress bar
var progressPercent = ((audio.currentTime / audio.duration) * 100).toFixed(2);
$("progress").attr("value", progressPercent);
if (seconds < 10) {
timeline.innerHTML = minutes + ':0' + seconds;
}
else {
timeline.innerHTML = minutes + ':' + seconds;
}
}, false);
/*-------------------------------------
EXPLAINER
--------------------------------------*/
$(".button__story").on("click", function(){
$(window).scrollTop(650); // Still pretty hacky.
if ($(".explainer__story").css('opacity') == 0) {
$(".explainer__opener").animate({opacity: 0}, {duration: 600});
$(".explainer__story").addClass("is--visible");
$(".fa-long-arrow-left").removeClass("is--hidden");
$(".fa-newspaper-o").addClass("is--hidden");
$(".button__prompt").html("Back");
$(".explainer__story").animate({opacity: 1}, {duration: 600});
} else {
$(".explainer__story").animate({opacity: 0}, {duration: 600});
$(".explainer__story").removeClass("is--visible");
$(".button__prompt").html("Read Story");
$(".fa-newspaper-o").removeClass("is--hidden");
$(".fa-long-arrow-left").addClass("is--hidden");
$(".explainer__opener").animate({opacity: 1}, {duration: 600});
}
});
});
Upvotes: 2
Views: 1327
Reputation: 61265
Change your button__form
buttons to labels and...
add a for
attribute corresponding to the radio button id
...
then the radio will select with no script needed.
.button__form {
background-color: gold;
border: 1px solid black;
}
<label class="button__form button__one" value="10" for="group_1455057699_1">$10</label>
<label class="button__form button__two" value="25" for="group_1455057699_2">$25</label>
<label class="button__form button__three" value="50" for="group_1455057699_3">$50</label>
<label class="button__form button__four" value="100" for="group_1455057699_4">$100</label>
<label class="button__form button__five" value="250" for="group_1455057699_5">$250</label>
<label class="button__form button__six" value="500" for="group_1455057699_6">$500</label>
<br/><br/>
<ul class="ss-choices" role="radiogroup" aria-label="Bids "><li class="ss-choice-item"><label><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><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><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><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><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><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>
Upvotes: 2