为什么我的单选按钮响应不响应我的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

你有两个问题：

1. 您的id="option"输入具有相同的radio，而ID应该是唯一的。
2. 您的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>

inputOptions

Answer 2

在代码中进行以下更改

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

注意：对于两个不同的元素，不应该有相同的id，你已经为两个无线电使用了id“option”。