我不知道为什么当单击此按钮时，它不会将表单发送到Google工作表

Question

我有一个Google工作表设置，可以从我的网站获取表单数据。 但是由于某种原因，它不允许我将事件添加到已经存在的按钮（“ CompleteOrder”）中。 如果我添加另一个按钮，则效果很好-

<button type="submit">Send</button>

但是“ CompleteOrder”按钮不起作用：

<form name="google-submit">
  <input name="name" type="text" placeholder="text" required>
  <input name="address" type="text" placeholder="text" required>
  <input name="city" type="text" placeholder="text">
  <input name="province" type="text" placeholder="text">
  <input name="zip" type="text" placeholder="text">
  <input name="number" type="text" placeholder="text">
  <input name="email" type="email" placeholder="text">
  <button type="submit">Send</button>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" id="CompleteOrder">Complete Order</button>
</div>

</form>

<script>
const scriptURL = 'https://script.google.com/macros/s/.............'
  const form = document.forms['google-submit']

  form.addEventListener('CompleteOrder', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })

</script>

重要的是要注意，单击“ CompleteOrder”时还有另一个功能可以在新的HTML标签中创建发票。

$('#CompleteOrder').on('click', function(event){
            event.preventDefault();

            var total = 0;
            var body = '';
            var products = JSON.parse(localStorage.getItem('in-cart')) || [];

            var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            var name = $('#cus-name').val();
            var address = $('#cus-address').val();
            var city = $('#cus-city').val();
            var state = $('#cus-state').val();
            var zipcode = $('#cus-zipcode').val();
            var phone = $('#cus-phone').val();
            var email = $('#cus-email').val();
            var d = new Date();

最终，我想将这两个脚本结合起来，但是在那儿并没有太多运气。 任何指导将不胜感激。

Answer 1

设法找出一个解决方案，不确定它是否最有效，但是否可行！ 只需在帖子的脚本中添加事件的重复项即可。

  $('#CompleteOrder').on('click', function(event){
      event.preventDefault();

      const scriptURL = 'https://script.google.com/macros/s/..........'
      const form = document.forms['submit']

      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))

    });


    $('#CompleteOrder').on('click', function(event){
        event.preventDefault();


        var total = 0;
        var body = '';
        var products = JSON.parse(localStorage.getItem('in-cart')) || [];

        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

        var name = $('#cus-name').val();
        var address = $('#cus-address').val();
        var city = $('#cus-city').val();
        var state = $('#cus-state').val();
        var zipcode = $('#cus-zipcode').val();
        var phone = $('#cus-phone').val();
        var email = $('#cus-email').val();
        var d = new Date();

        var date = months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();