时间戳

首页 > 解决方案 > 我是代码新手，为什么我的用户表单没有重定向到相同的链接或没有自动重置表单

html - 我是代码新手，为什么我的用户表单没有重定向到相同的链接或没有自动重置表单

问题描述

使用 HTML 创建用户表单

它已成功将数据返回到谷歌表格，但单击提交后未重置表单。

谁能帮助我，我是这个代码的新手

如果可能的话，任何人都可以通过下一个按钮告诉我如何编写多级表单，请给我任何示例代码或文件...。

<!DOCTYPE html>
<html>
  <title>Factory Order Form</title>
    <body style="background-color:lightgrey;">
      
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=2.0">
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
    <form id="myform">
    

   Entry Name:
   <input type="text" style="font-weight: bold;" name="Entry_Name"  size='10' required>


    <label for="Store_Name" required>Store Name   :</label> 
    <select id="Store_Name" name="Store_Name"  >
    <option value="" style="display:none;"></option>  
    <option value="Gokul - Lord Sinha Road">Gokul - Lord sinha road</option>
    <option value="Gokul Bhog Anadya">Gokul Bhog - Anadya</option>
    </select>
    

      Delivery Date:
      <input type="date" name="Delivery_Date" size='4' required>
      
      Delivery time:
      <input type="time" name="Delivery_time" size='4'required></h3>
    
      <br>  
    
    <hr><hr> 


    <br><br>
    
    <label for="Product1">Product1   :</label>
    <select id="Product1" name="Product1">
    <option value="" style="display:none;"></option>  
    <option value="Cow_Milk_Items">Cow Milk Items</option>
    <option value="Buffalo_Milk_Items">Buffalo Milk Items</option>
    <option value="Dry_Items">Dry Items</option>
    </select>

   
     <label>Item_Name1 :
        <select id="Item_Name1" name="Item_Name1">
        <option value="" style="display:none;"></option>  
        <?!= getVendors(); ?>
      </select>


    Qty1   :
    <input type="Number" name="Qty1" > 

    <label for="KG_PC">KG/PC   :</label>
    <select id="KG_PC1" name="KG_PC1">
    <option value="" style="display:none;"></option>  
    <option value="KG">KG</option>
    <option value="PC">PC</option>
    </select>



    Rate1   :
    <input type="Number" name="Rate1"> 
    

    Size1   :
    <input type="text" name="Size1"> 
    
    Order No.1   :
    <input type="Number" name="Order_No1"> 
   
   <br>
    
    <div class="block">
    <button type="submit" class="action">Submit</button>
    </div>
    </form>
    <script>
    document.querySelector("#myform").addEventListener("submit", 
    function(e)
    {
    e.preventDefault();    //stop form from submitting
    google.script.run.addNewItem(this);
     google.script.host.close();//close this dialogbox
    }
    );
 </body>
</html>

----------gs 代码----------

    function doGet(e) {
      var htmlOutput =  HtmlService.createTemplateFromFile('form');
      return htmlOutput.evaluate();
    }
     
    
    
    function addNewItem(form_data)
    {
       var ss1 = SpreadsheetApp.getActiveSpreadsheet();
       var of = ss1.getSheetByName("Prod data Submit");
     
       
       of.getRange("b1").setValue(data.Entry_Name)
       of.getRange("b2").setValue(data.Store_Name)
       of.getRange("b3").setValue(data.Delivery_Date)
       of.getRange("b4").setValue(data.Delivery_time
    
     
    }

标签： htmlformsgoogle-apps-scriptgoogle-sheets

解决方案

问题：

如果我理解正确，您正在通过 为电子表格设置一些值google.script.run.addNewItem(this);，并且您希望在完成此操作后重置表单字段。

解决方案：

为此，如果执行成功，您应该使用withSuccessHandler(function)执行回调函数addNewItem，并重置表单字段。重置这些字段的一种简单方法是使用HTMLFormElement.reset()。

因此，您的script标签可能是这样的：

<script>
  document.querySelector("#myform").addEventListener("submit", 
  function(e) {
    e.preventDefault();
    google.script.run.withSuccessHandler(resetForm)
                     .addNewItem(this);
  });
  function resetForm() {
    document.querySelector("#myform").reset();
  }
</script>

其他问题：

这里还有其他几个问题。如果您使用的是您提供的确切代码，则您目前无法将数据写入电子表格：

  • 在您提供的 HTML 中，<script>标签没有关闭 ( </script>)。
  • 在addNewItem中，参数被调用form_data，但随后您正在使用data. 两个变量应该匹配，否则你会得到一个错误。
  • 您正在使用google.script.host.close()，它用于关闭对话框或侧边栏，但在像您这样的网络应用程序中没有位置。

推荐阅读