点击按钮应检查谷歌表单上的无线电输入

Clicking button should check radio input on Google Form

本文关键字:无线电 输入 表单 谷歌 按钮 检查      更新时间:2023-09-26

问题

提交谷歌表单时出现错误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>