T.Doe T.Doe - 1 month ago 9
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

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>

Comments