无法将表单值写入电子表格

时间:2015-03-27 14:58:44

标签: jquery google-apps-script google-spreadsheet-api

我创建一个请假表单 - 附加代码并将值作为JSON对象传递给服务器端脚本,然后表单冻结。它不返回任何值。有两个问题

  1. 如何使服务器脚本将值写入电子表格
  2. 如何获取记录的当前日期时间戳。

    <head>
    
    <style>
    
    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
        font-size:16pt;
        font-family:Verdana;
        padding: 5px;
    }
    </style>
    
    </head>
    
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    
    <script>
    
    function sendval(){
    var leaverec = new Object();
    
    leaverec.startdate = $("#txtFromDate").datepicker("getDate");
    leaverec.enddate = $("#txtToDate").datepicker("getDate");
    leaverec.contactnum = $("#contactnum").val();
    
    jsonleaverec = JSON.stringify(leaverec);
    
    google.script.run
              .withSuccessHandler(onsuccess)
              .processLeaveForm(jsonleaverec))
    }
    
    function onsuccess(retval){
       alert("Leave Form Submitted Successfully");
    }
    
    </script>
    
    <div>
    
    <form id="leaveapp">
    
    <?var logged_user = getcurruser(); ?>
    <label><?=logged_user?></label>
    
    <p> Start Date : <input type="text" name="StartDate" id="txtFromDate" /> </p>
    <p> End Date :   <input type="text" name="EndDate" id="txtToDate" /> </p>
    <p> Contact Number : <input type="text" name="Contactnum" id="contactnum" /> </p>
    
    <script>
    $("#txtFromDate").datepicker({
            minDate: 0,
            maxDate: "+60D",
            numberOfMonths: 2,
            onSelect: function(selected) {
                $("#txtToDate").datepicker("option","minDate", selected)
            }
        });
    
    </script>
    
    <script>
    
    $("#txtToDate").datepicker({ 
            minDate: 0,
            maxDate:"+60D",
            numberOfMonths: 2,
            onSelect: function(selected) {
                $("#txtFromDate").datepicker("option","maxDate", selected)
            }
        });
    
    </script>
    
     <input type="button" value="Submit" onclick=senddata() />
    
    </form>
    
    </div>
    
    </html>
    
  3. 谷歌脚本如下

    function getcurruser(){
     var current_user = PropertiesService.getScriptProperties().getProperty('curruser');
     return current_user;
    }
    
    function processLeaveForm(jsonleaverec){
      var doc = SpreadsheetApp.openById("12345678901234567890");
      var sheet = doc.getSheetByName("LeaveRequests")
      var d = new Date();
      var currentTime = d.toLocaleTimeString();
      var curruser = getcurruser();
    
      var leaveform = eval("(" + jsonleaverec + ")");
    
      var leavestart = leaveform.StartDate;
      var leaveend = leaveform.EndDate;
      var contactnum = leaveform.contactnum; 
    
      var leaverange = sheet.getrange((sheet.getLastRow()+1),1);
    
      leaverange.setValue(curruser);
    
    
      return "success";
    
    }
    

1 个答案:

答案 0 :(得分:0)

更简单的方法是发送表单,您不必构造JSON。使用document.getElementById(“leaveapp”);。

发送它的HTML

在HTML中你会重构:

google.script.run.withSuccessHandler(onsuccess).processLeaveForm(document.getElementById("leaveapp"));

并在code.gs

function processLeaveForm(jsonleaverec){
  var doc = SpreadsheetApp.openById("12345678901234567890");
  var sheet = doc.getSheetByName("LeaveRequests")
  var d = new Date();
  var currentTime = d.toLocaleTimeString();
  var curruser = getcurruser();

  var leavestart = leaveform.StartDate;
  var leaveend = leaveform.EndDate;
  var contactnum = leaveform.contactnum; 

您还必须在输入/按钮上删除表单提交,这样您才不会得到空白页:

$('#leaveapp').on("keyup keypress", function(e) {
  var code = e.keyCode || e.which; 
  if (code  == 13) {               
    e.preventDefault();
    return false;
  }
});