T.Doe T.Doe - 1 year ago 62
HTML Question

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

Answer Source

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>