CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-apps-scriptgoogle-sheets
T.Doe
T.Doe

Reputation: 2035

Why wont my radio button response respond to my Google Spreadsheet?

I've used the following code as a method to send user input data on my html site to a Google Spreadsheet:

Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  function postContactToGoogle() {
    var firstname=$('#firstname').val();
    var surname=$('#surname').val();
    var dob=$('#dob').val();
    var email=$('#email').val();
    var option=$('#option').val();
    $.ajax({
      url:"https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
      data: {"entry.1012452068":firstname, "entry.1038894874":surname, "entry.1352091133":dob, "entry.1048111489":email, "entry.1786559101":option}, type: "POST", datatype: "xml", statusCode: {0:function() {window.location.replace("thankyou.html");}, 200:function(){window.location.replace("thankyou.html");}}
    });
  }
</script>

HTML:

<form>
  First Name:<br>
    <input id="firstname" name="firstname" type="text" placeholder="First Name"/><br>
  Surname:<br>
  <input id="surname" name="surname" type="text" placeholder="Surname"/><br>
  DoB:<br>
    <input id="dob" name="dob" type="text" placeholder="DoB"/><br>
  Email:<br>
    <input id="email" name="email" type="text" placeholder="Email"/><br>
  Option Pledge:<br>
    <input id="option" name="option" type="radio"/> £49 <br>
    <input id="option" name="option" type="radio"/> £69 <br>

    <input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()"/>
</form>

It all works perfectly well except for the last 2 radio button options don't appear on the spreadsheet (shown on the image below). Does anyone have an insight into what I'm doing wrong?

enter image description here

Upvotes: 0

Views: 120

Answers (2)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

You have 2 issues:

  1. Your radio inputs have the same id="option" and id's should be unique .
  2. Your radio inputs haven't value attribute to send like value="your value".

So this example should work

function postContactToGoogle() {
  var firstname = $('#firstname').val();
  var surname = $('#surname').val();
  var dob = $('#dob').val();
  var email = $('#email').val();
  var option = $("[name='option']").val();
  
  console.log({
      "entry.1012452068": firstname,
      "entry.1038894874": surname,
      "entry.1352091133": dob,
      "entry.1048111489": email,
      "entry.1786559101": option
    });
    alert("your radio button value: " + option);
   //it's working..

  //then validate your data before sending

  $.ajax({
    url: "https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
    data: {
      "entry.1012452068": firstname,
      "entry.1038894874": surname,
      "entry.1352091133": dob,
      "entry.1048111489": email,
      "entry.1786559101": option
    },
    type: "POST",
    datatype: "xml",
    statusCode: {
      0: function() {
        alert("status:0, thank you");
        window.location.replace("thankyou.html");
      },
      200: function() {
        alert("status:200, thank you");
        window.location.replace("thankyou.html");
      }
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<form>
  First Name:
  <br>
  <input id="firstname" name="firstname" type="text" placeholder="First Name" />
  <br>Surname:
  <br>
  <input id="surname" name="surname" type="text" placeholder="Surname" />
  <br>DoB:
  <br>
  <input id="dob" name="dob" type="text" placeholder="DoB" />
  <br>Email:
  <br>
  <input id="email" name="email" type="text" placeholder="Email" />
  <br>Option Pledge:
  <br>
  <input id="option1" value="Black Ballad Membership - £49" name="option" type="radio" />£49
  <br>
  <input id="option2" value="Premium Black Ballad Membership - £69" name="option" type="radio" />£69
  <br>

  <input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()" />
</form>

Upvotes: 1

Nitin Dhomse
Nitin Dhomse

Reputation: 2622

Do following change in your code,

var option = $('input[name=option]:checked').val()

Note: There should not be the same id for two different element, you have used id "option" for both radio.

Upvotes: 0

Related Questions