Как отправить данные в Форму Google, используя свою форму и AJAX?

318

12 декабря 2016, 10:05

Нашла интересный тюториал https://wiki.base22.com/pages/viewpa...ageId=72942000 где Google Spreadsheet используют в качестве базы данных. Решила попробовать с checkbox, данные сохраняются только с одной помеченной галочкой. когда отмечаю обе галочки, spreadsheet клетка остается пустой

function postToGoogle() { 
  var field1 = $.map($(':checkbox[name=qs1]:checked'), function(n, i) { 
    return n.value; 
  }).join(','); 
  var field2 = $("input[type='radio'][name='qs2']:checked").val(); 
 
 
  $.ajax({ 
    url: "https://docs.google.com/forms/d/1Jr25MNbglMW4YZnabiCQ4HITLXq4U_70YyZeeoVGsn0/formResponse", 
    data: { 
      "entry.1910683869": field1, 
      "entry.1927167872": field2 
    }, 
    type: "POST", 
    dataType: "xml", 
    statusCode: { 
      0: function() { 
        //Success message 
      }, 
      200: function() { 
        //Success Message 
      } 
    } 
  }); 
} 
 
$(document).ready(function() { 
  $('#form').submit(function() { 
    postToGoogle(); 
    return false; 
  }); 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="form" target="_self" onsubmit="" action=""> 
  <fieldset> 
    <label>Question 1</label> 
    <input id="qs1_op_1" class="ids" type="checkbox" value="Yes" name="qs1"> 
    <input id="qs1_op_2" class="ids" type="checkbox" value="No" name="qs1"> 
  </fieldset> 
  <fieldset> 
    <label>Question 2</label> 
    <input id="qs2_op_1" type="radio" value="Yes" name="qs2"> 
    <input id="qs2_op_2" type="radio" value="No" name="qs2"> 
  </fieldset> 
 
  <div style="width: 100%; display: block; float: right;"> 
    <button id="send" type="submit"> 
      Send 
    </button> 
  </div> 
</form>

Где ошибка, как передавать значения всех помеченных галочек в одну клетку?

Спасибо

Answer 1

Через объект передать так и не удалось, потому как в Form Data должны быть повторяющееся имена параметров

parsed view

source view

Можно использовать .serialize()

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
  <form id="form" target="_self" onsubmit="" action="">
    <fieldset>
        <label>Question 1</label> <input id="qs1_op_1" class="ids" type="checkbox" value="Yes" name="entry.1216472492"> <input id="qs1_op_2" class="ids" type="checkbox" value="No" name="entry.1216472492">
    </fieldset>
    <fieldset>
        <label>Question 2</label> <input id="qs2_op_1" type="radio" value="Yes" name="entry.844628612"> <input id="qs2_op_2" type="radio" value="No" name="entry.844628612">
    </fieldset>
    <div style="width: 100%; display: block; float: right;">
        <button id="send" type="submit">Send</button>
    </div>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="./js.js"></script>
</body>
</html>

js.js

(function(_go_) {
    function Sender(formID, serialize, code0, code200) {
    console.log('i\'m in ');
    this.url = 'https://docs.google.com/forms/d/' + formID + '/formResponse';
    this.data = serialize;
    this.code0 = code0;
    this.code200 = code200;
    }
    Sender.prototype.postData = function() {
    var self = this;
    $.ajax({
        url : self.url,
        data : self.data,
        type : "POST",
        crossDomain : true,
        dataType : "xml",
        processData : false,
        statusCode : {
        0 : self.code0,
        200 : self.code200
        }
    });
    };
    _go_.Sender = Sender;
})(window);
function postToGoogle() {
    var serialize = $("#form").serialize();    
    try {
      new Sender('1ilEgocSpBs32md4e4GYPZIYSXD1rpf1qajUNDDXgaYY', serialize, function(e) {
        console.log(e)
      }, function(e) {
        console.log(e)
      }).postData();
    } catch (err) {
      console.log(err);
    }
}
$(document).ready(function() {
    $('#form').submit(function() {
    event.preventDefault();
    postToGoogle();
    });
});

Надо помнить, что