验证后将基于html表单输入的消息返回到Google表格中

时间：2019-06-01 12:54:39

标签： javascript html google-apps-script google-sheets-api

现在我已经在X上敲了一下头。我有一个Google表格，一个HTML表单和一个将数据提交到表格的javascript。我的目标是让表单将数据提交到工作表，然后检查工作表中提交的字段之一的值，以查看它是否与列中的单元格匹配。该值具有对应的值，该值在下一列中格式为日期。如果单元格的输入具有相应的“过期”日期，我希望有一条消息返回到html页面，作为弹出窗口，指出该日期已过期。有什么想法吗？

1 个答案:

答案 0 :(得分：0)

我发现此Google Apps脚本可以执行我要执行的操作，但现在我需要弄清楚如何将结果返回到具有表单的网页上

 <!-- Search Sheet for Bottle Expiration date -->

var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/ID/edit#gid=1295319675");
var sheet = ss.getSheetByName("Entries");

function doGet(e){
 return search(e) ;
}  

function doPost(e){
 return search(e) ;
}  


function search(e){
 var id = e.parameter.last_name;

  var values = sheet.getRange(2, 2, sheet.getLastRow(),sheet.getLastColumn()).getValues();

  for(var i = 0;i<values.length; i++){

    if(values[i][0] == id ){
      i=i+2;

      var name = sheet.getRange(i,4).getValue();
      var hydroDate = Date.now()+14;
      var hydroalert = ContentService.createTextOutput("Bottle is due for Hydro").setMimeType(ContentService.MimeType.TEXT)
      if (hydroDate <= name)
      return hydroalert;
    }
  }
  return ContentService.createTextOutput("Id not found").setMimeType(ContentService.MimeType.TEXT);

}

<!-- HTML PAGE -->
    <!DOCTYPE html>
    <html>
    <head><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>UFD Tour 2 Monthlies</title>

    <!-- <link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld"/> -->


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js?rev=<?php echo time();?>"></script>
    <script type="text/javascript" src="ufd_tour_2_monthlies.js?rev=<?php echo time();?>"></script>
      <script type="text/javascript" src="qrscan.js?rev=<?php echo time();?>"></script>
    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js">
    </script>

      <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <!-- Place this within the <head> tag or just before the end of your <body> tag. -->
    <script src="https://awesome-table.com/AwesomeTableInclude.js"></script>
    </head>


    <style> 
    h2 {
       text-align: center;
      }
    input[type=text], input[type=password] { 
        width: 100%; 
        padding: 12px 20px; 
        margin: 8px 0; 
        display: inline-block; 
        border: 1px solid #ccc; 
        box-sizing: border-box; 
    } 
    button { 
        background-color: #4CAF50; 
        color: white; 
        padding: 14px 20px; 
        margin: 8px 0; 
        border: none; 
        cursor: pointer; 
        width: 100%; 
    } 
    .cancelbtn { 
        padding: 14px 20px; 
        background-color: #f44336; 
    } 
    .cancelbtn,.signupbtn { 
        float: left; 
        width: 50%; 
    } 

    .container { 
        padding: 16px; 
    } 


    .clearfix::after { 
        content: ""; 
        clear: both; 
        display: table; 
    } 


    @media screen and (max-width: 300px) { 
        .cancelbtn, .signupbtn { 
        width: 100%; 
        } 
    } 
      .form_container { width: 90%; max-width:450px; margin:20px 30px 40px 30px; padding:15px 20px; font-size:15px; line-height:25px; text-align:left; background:#EBEBEB; }
    .form_field { display:block; width:100%; height:30px; margin:5px 0px 10px 0px; padding:0px 10px; color:#333; font-size:16px; border:1px solid #999; border-radius:3px; -webkit-appearance:none; }
    .form_button { display:block; width:100%; height:35px; margin:20px 0px; padding:0px 0px; color:#FFF; font-size:16px; font-weight:bold; border:1px solid #3E7998; border-radius:3px; background:#3E7998; -webkit-appearance:none; }
    .form_message { }

      body, input {font-size:14pt}
    input, label {vertical-align:middle}
    .qrcode-text { display:block; width:90%; height:30px; margin:5px 0px 10px 0px; padding:0px 10px; color:#333; font-size:16px; border:1px solid #999; border-radius:3px; -webkit-appearance:none; }
    .qrcode-text-btn { display:block; text-align:center; width:90%; height:35px; margin:20px 0px; padding:0px 0px; color:#FFF; font-size:16px; font-weight:bold; border:1px solid #3E7998; border-radius:3px; background:#3E7998; -webkit-appearance:none; }
    .qrcode-text-btn > input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}
    </style> 
    <body> 

    <h2>Tour 2 Monthlies</h2> 


    <div class="container"> 
         <form id="sheets" name="sheets" class="form_body">
           <label for="first_name">Date</label>
    <input id="first_name" name="first_name" type="date" class="form_field" value="" placeholder="Select Date"/>
           <label for="last_name">Bottle Number</label>
    <input id="last_name" name="last_name" class="form_field" onfocus="this.value='';" value="" placeholder="Select here to scan or enter manually"/>
           <input type="button" name="btnScanBarcode" id="btnScanBarcode" class="form_button" value="Scan Bottle" onclick="javascript:openQRCamera(this);"></button>

     <!-- <input id="last_name" name="last_name" type=text placeholder="Select here to scan or enter manually" class="qrcode-text"><label class="qrcode-text-btn"><input type=file accept="image/*" capture=environment onclick="openQRCamera(this);" tabindex=-1>Scan Bottle</label> 

      <script>function openQRCamera(node) {
      var reader = new FileReader();
      reader.onload = function() {
        node.value = "";
        qrcode.callback = function(res) {
          if(res instanceof Error) {
            alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
          } else {
            node.parentNode.previousElementSibling.value = res;
          }
        };
        qrcode.decode(reader.result);
      };
      reader.readAsDataURL(node.files[0]);
    }</script> -->

      <script>
    function startBarcodeScanner() 
    {    

        window.location.href = 'bwstw://startscanner?field=last_name';
    }

    </script>
           <label for="email">Bottle Location</label>
    <select id="email" name="email" class="form_field" value="" placeholder="Bottle Location"/>
      <option>ENGINE 1</option>
    <option>ENGINE 2</option>
    <option>ENGINE 3</option>
    <option>SQUAD 4</option>
    <option>SQUAD 41</option>
    <option>LADDER 1</option>
    <option>TRUCK 1</option>
    <option>TRUCK 2</option>
    <option>TRUCK 3</option>
    <option>ENGINE 5</option>
    <option>ENGINE 6</option>
    <option>ENGINE 7</option>
    <option>RESCUE 1</option>
    <option>RESCUE 2</option>
    <option>RESCUE 3</option>
    <option>STATION 1 SPARE</option>
    <option>STATION 2 SPARE</option>
    <option>STATION 3 SPARE</option>
    <option>SPECIAL OPS</option>
    <option>BC</option>
    <option>COD</option>
    <option>DC</option>
    <option>EMSC</option>
    <option>FINV</option>
    <option>COMM</option>
    <option>TRAIN</option>
    <option>BOAT</option>
    <option>SPARE MASK</option>
    <option>O/S</option>
    <option>OTHER LOCATION</option>
    <option>OTHER VEHICLE</option>
      </select>


    <input id="gs_code" name="gs_code" type="hidden" class="" value="=VLOOKUP(B:B,HydroBottles,4,FALSE)" placeholder=""/>
        <div class="clearfix"> 

         <input id="submit" name="submit" type="button" class="form_button" value="Enter Bottle" onClick="submit_form(); document.getElementById('last_name').value = ''; playAudio()"/>
             <audio id="beep">
      <source src="bleep.mp3" type="audio/mpeg">
    </audio>

    <div class="form_message" id="message">





          </div>
        </div> 
    </div> 

      <!-- Place this tag where you want the Awesome Table Widget to render -->
    <div data-type="AwesomeTableView" data-viewID="-LfNI2wu42vUdIl5oy9c"></div>


    </form> 
    </body> 
    </html>
相关问题
最新问题