时间戳

首页 > 解决方案 > 提交表单到谷歌表格的问题

html - 提交表单到谷歌表格的问题

问题描述

我在我的网站中创建的表单存在问题，并且它与谷歌表格连接，所以如果有人填写了表格，它应该将数据发送到谷歌表格，但我有问题如果我使用 onclick 将用户重定向到另一个页面它会停止将数据发送到谷歌表，如果我不使用 onclick，它可以完美运行并将数据发送到谷歌表

我的问题是如何将用户重定向到另一个页面，同时我可以将数据接收到谷歌表中？

我在网上搜索了很多来解决这个问题，但所有的解决方案都不起作用

在此先感谢伙计们，我希望在这里找到解决方案

这是代码

<div class='form-style-6' id='opening'>
<h1>احجزي طلبك</h1>
<form id='openinge' name='submit-to-google-sheet'>
<input id='taher' name='name' placeholder='الاسم' type='text'/>
<input name='phone number' placeholder='رقم الهاتف' type='text'/>
<textarea name='address' placeholder='العنوان'/>


  <div>
        <select id='country' name='country' width='400'>
          <option value='نسيت تختار المقاس'>  --اختري المقاس--  </option>
          <option value='L'>L</option>
          <option value='M'>M</option>
          <option value='XL'>XL</option>
          <option value='XXL'>XXL</option>
          <option value='XXXL'>XXXL</option>
          <option value='XXXXL'>XXXXL</option>
          <option value='XXXXXL'>XXXXXL</option>
        </select>
    <select id='color' name='color' width='400'>
          <option value='نسيت تختار اللون'>  --اختري اللون--  </option>
          <option value='اللون الاسود'>اللون الاسود</option>
          <option value='اللون البيج'>اللون البيج</option>

        </select>
      </div>


<input id='submit-form' onclick='window.location.href = &apos;https://spanxkuwaitconfirm.blogspot.com&apos;;' type='submit' value='ارسلي الطلب'/>
</form>
</div>




    <script>

  const scriptURL = &#39;https://script.google.com/macros/s/AKfycbx5dGRCKt1w_FHZZcm5ktE5Ada3QPVu6RvU/exec&#39;
  const form = document.forms[&#39;submit-to-google-sheet&#39;]

  form.addEventListener(&#39;submit&#39;, e =&gt; {
    e.preventDefault()
    fetch(scriptURL, { method: &#39;POST&#39;, body: new FormData(form)})
      .then(response =&gt; console.log(&#39;Success!&#39;, response))
      .catch(error =&gt; console.error(&#39;Error!&#39;, error.message))
  })


</script>.

标签： html

解决方案

我相信你的目标和情况如下。

  • 您希望在将数据提交到由 Google Apps 脚本创建的 Web 应用程序后进行重定向。
  • 您已经确认您的 Web 应用程序运行良好。

修改点：

  • 在您的脚本中，删除onclick和<input id='submit-form' onclick='window.location.href = "https://spanxkuwaitconfirm.blogspot.com"'放入window.location.href = "https://spanxkuwaitconfirm.blogspot.com"Javascript 怎么样？

当这反映到您的脚本中时，它变成如下。

修改后的脚本：

从： 
<input id='submit-form' onclick='window.location.href = &apos;https://spanxkuwaitconfirm.blogspot.com&apos;;' type='submit' value='ارسلي الطلب'/>
</form>
</div>




    <script>

  const scriptURL = &#39;https://script.google.com/macros/s/AKfycbx5dGRCKt1w_FHZZcm5ktE5Ada3QPVu6RvU/exec&#39;
  const form = document.forms[&#39;submit-to-google-sheet&#39;]

  form.addEventListener(&#39;submit&#39;, e =&gt; {
    e.preventDefault()
    fetch(scriptURL, { method: &#39;POST&#39;, body: new FormData(form)})
      .then(response =&gt; console.log(&#39;Success!&#39;, response))
      .catch(error =&gt; console.error(&#39;Error!&#39;, error.message))
  })


</script>
至： 
    <input id='submit-form' type='submit' value='ارسلي الطلب'/>  <!-- Modified -->
  </form>
</div>

<script>
  const scriptURL = 'https://script.google.com/macros/s/AKfycbx5dGRCKt1w_FHZZcm5ktE5Ada3QPVu6RvU/exec';
  const form = document.forms['submit-to-google-sheet'];
  form.addEventListener('submit', e => {
    e.preventDefault();
    fetch(scriptURL, {method: "POST", body: new FormData(form)})
      .then(response => {
        console.log(response);
        window.location.href = "https://spanxkuwaitconfirm.blogspot.com";  // <--- Added
      })
      .catch(error => console.error(error.message));
  });
</script>
  • 在此修改中，数据提交后，window.location.href = "https://spanxkuwaitconfirm.blogspot.com";运行。

笔记：

  • 在您的脚本中，使用了数字字符引用。所以在这次修改中，我修改了它以获得更高的可读性。所以请注意这一点。当您需要使用数字字符引用时，请修改上述修改后的脚本。

推荐阅读