javascript - 为什么我的单选按钮响应无法响应我的 Google 电子表格？

Question

我使用以下代码作为将 html 网站上的用户输入数据发送到 Google 电子表格的方法:

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>

除了最后 2 个单选按钮选项未出现在电子表格上(如下图所示)之外，一切都运行良好。有人知道我做错了什么吗？

Answer 1

您有 2 个问题:

1. 您的 radio 输入具有相同的 id="option" 并且 ID 应该是唯一的。
2. 您的 radio 输入没有要发送的 value 属性，如 value="your value"。

所以这个例子应该可以工作

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>