点击按钮应检查谷歌表单上的无线电输入
Clicking button should check radio input on Google Form
问题
提交谷歌表单时出现错误Looks like you have a question or two that still needs attention
,因为它无法识别是否已选择按钮及其相应值,因为它们的表单使用了单选输入。
实时链接:https://s3.amazonaws.com/bsunproduction/auction/index.html
向下滚动经过标题,查看我的按钮下方的未格式化无线电输入
寻找解决此问题的最佳方法:
-
鉴于我的按钮样式符合我的要求,当我点击
.button__form
时,它应该是.prop(checked, true)
,以检查谷歌在表单上的无线电输入,ie如果你点击$10按钮,它应该使$10的无线电输入checked
-
或者,我应该将我的无线电输入设置为假按钮,但我不相信这条路线是解决问题的正确方法
谷歌表单
<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>
scripts.js
$(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});
}
});
});
将button__form
按钮更改为标签和
添加与单选按钮id
相对应的for
属性
则无线电将在不需要脚本的情况下进行选择。
.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>
相关文章:
- 无线电输入更改的jQuery事件未启动
- 通过单击链接(兄弟姐妹?)从无线电输入中获取id
- 角度双向绑定无线电输入
- 检查了多个无线电输入
- 如何更改无线电输入字段中文本的颜色
- 使用 JavaScript 和无线电输入更改 HTML 中的背景颜色有什么错误
- 单击时更改无线电输入值(实际上将其更改回来)
- 为什么我的无线电输入值是 NaN
- 如何为每个无线电输入组分配不同的名称
- 如何使用 JavaScript 在 Firefox 中使所需的无线电输入可选
- 将对象的键绑定到 AngularJS 中的无线电输入值
- 我的 JavaScript 无法正确检查表单的无线电输入
- 取消选择较低的无线电输入
- 根据选中的无线电输入更改表单操作和文本输入名称
- 环通并验证多个无线电输入
- 无线电输入点击功能不会运行
- 如何在页面刷新时保留无线电输入状态
- 根据无线电输入条件禁用和启用按钮提交
- 反应无线电输入不检查
- 我应该如何根据所选的无线电输入重新组织查询的控制流