Andrew Nguyen
Andrew Nguyen

Reputation: 1436

Clicking button should check radio input on Google Form

Problem

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.

Live Link: https://s3.amazonaws.com/bsunproduction/auction/index.html

Scroll down past the header to see the unstyled radio inputs below my buttons

Looking for the best approach to solving this problem:

Google Form

<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});
    }
  });
});

Upvotes: 2

Views: 1327

Answers (1)

WhiteHat
WhiteHat

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

Related Questions