当点击提交按钮时Google窗体脚本调用HTML页面

我有一个Google表单，我已经创建了用于类注册的Google表单。当用户点击提交按钮触发onSubmit事件时，我正在编写我的第一个Google脚本（基于我从Google教程材料中学到的内容）来调用HTML页面。当点击提交按钮时Google窗体脚本调用HTML页面

调用HTML页面的原因是指导用户选择页面中包含的PayPal选项。我看不到将它们添加到提交后显示的“设置”页面的方法。或表单本身，所以我决定创建第二页。

我拼凑起来的代码（是的，我是小白）是

function goToPayment() { 
//onSubmit, goes to the PayPal payment page so 
//that users pay for the class 


function doGet(request) { 
    return HtmlService.createTemplateFromFile('PayPayPayment.html') 
     .evaluate() 
     .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
} 

function include(filename) { 
    return HtmlService.createHtmlOutputFromFile(filename) 
     .getContent(); 
} 
}

，这个调用是页面：

<!DOCTYPE html> 
<html> 
    <head> 
     <base target="_top"> 
    </head> 
    <body> 
     <h1>Payment</h1> 
      <p> 
       Complete registration for the Introduction to Arduino 
       class by paying for it with PayPal. All major credit 
       cards accepted. 
      </p> 
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> 
      <input type="hidden" name="cmd" value="_s-xclick"> 
      <input type="hidden" name="hosted_button_id" value="PutValueHere"> 
      <table> 
       <tr><td><input type="hidden" name="on0" value="Early bird pricing!">Early bird pricing!</td></tr><tr><td><select name="os0"> 
       <option value="Member price (before May 11th) - kit, instruction, lunch">Member price (before May 11th) - kit, instruction, lunch $145.00 USD</option> 
       <option value="Member price (before May 11th) - instruction, lunch">Member price (before May 11th) - instruction, lunch $50.00 USD</option> 
       <option value="Non-member price (before May 11th) - kit, instruction, lunch">Non-member price (before May 11th) - kit, instruction, lunch $165.00 USD</option> 
       <option value="Non-member price (before May 11th) - instruction, lunch">Non-member price (before May 11th) - instruction, lunch $60.00 USD</option> 
       </select> </td></tr> 
      </table> 
      <input type="hidden" name="currency_code" value="USD"> 
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
    </form> 
    </body> 
</html>

脚本通过单元测试，但不当我测试表单时被调用。有关如何完成此任务的任何想法或建议？接受有关解决方法的建议以及我应该在哪里修复我的代码。

来源

2016-04-30 Shirley Hicks

它看起来像'的doGet（）'函数是'goToPayment（'功能块的内部。那是故意的？ “goToPayment（'函数，是由”On Form Submit“事件触发的函数？ –

您无法使用Google表单打开另一个Web应用程序，您已经知道如何创建Apps脚本Web应用程序，所以您可以使用它来代替Google表单，Google表单可以快速连续处理多个表单提交，但如果这不太可能，您可能不必担心。 –

您无法将用户从Google表单中重定向。如果您需要此功能，则需要创建GAS Web App。其中包括自己部署简单Web应用程序的示例代码。

示例Web应用程序：Web App

部署：

创建一个新的谷歌Apps脚本项目，粘贴下面的代码到各自的文件。（HTM & JavaScript进入HTML文件）。

点击云图标：

编辑选项，然后单击部署：

GAS代码：

function doGet(){ 
    var template = HtmlService.createTemplateFromFile('Index'); 
    return template.evaluate() 
     .setTitle('Example Form') 
     .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
} 


function formSubmit(formData){ 
    //Submission logic goes here 
    return true; 
}

的JavaScript：

<script> 
var inputs = [ 
    'nameInput', 
    'cityInput', 
    'stateInput', 
    'zip-codeInput', 
    'typeSelect' 

] 

$(function(){ 
    console.log('startup') 
    $('#submitButton').on('click', function(){ 
    console.log(getFormData()); 

    google.script.run.withSuccessHandler(function(returnValue){ 
     goToPayment(); 
    }).formSubmit(getFormData()); 

    }) 
}) 

function goToPayment(){ 
    $('#mainForm').toggleClass('hidden'); 
    $('#paymentForm').toggleClass('hidden'); 
} 

function getFormData(){ 
    var output = {}; 
    for(var i = 0; i < inputs.length; i++){ 
     output[inputs[i]] = $('#'+inputs[i]).val(); 
    } 
    return output; 
} 
</script>

HTML：

<!DOCTYPE html> 
<html> 

    <head> 
     <base target="_top"> 
     <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    </head> 

    <body> 
     <div id="mainForm"> 
      <h1>Example Form</h1> 
      <form> 
       <div> 
        <div class="inline form-group"> 
         <label for="name">Name</label> 
         <input type="text" id="nameInput" style="width: 150px;"> 
        </div> 
       </div> 

       <div> 
        <div class="inline form-group"> 
         <label for="city">City</label> 
         <input type="text" id="cityInput" style="width: 150px;"> 
        </div> 
        <div class="inline form-group"> 
         <label for="state">State</label> 
         <input type="text" id="stateInput" style="width: 40px;"> 
        </div> 
        <div class="inline form-group"> 
         <label for="zip-code">Zip code</label> 
         <input type="text" id="zip-codeInput" style="width: 65px;"> 
        </div> 
       </div> 

       <div class="block form-group"> 
        <label for="typeSelect">Type</label> 
        <select id="typeSelect"> 
         <option value=""></option> 
         <option value="Type 1 ">Type 1</option> 
         <option value="Type 2 ">Type 2</option> 
         <option value="Type 3 ">Type 3</option> 
         <option value="Type 4 ">Type 4</option> 
        </select> 
       </div> 
       <button class="action" type="button" id="submitButton">Submit</button> 
      </form> 
     </div> 
     <div id="paymentForm" class="hidden "> 
      <h1>Payment</h1> 
      <p> 
       Complete registration for the Introduction to Arduino 
       class by paying for it with PayPal. All major credit 
       cards accepted. 
      </p> 
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> 
      <input type="hidden" name="cmd" value="_s-xclick"> 
      <input type="hidden" name="hosted_button_id" value="PutValueHere"> 
      <table> 
       <tr><td><input type="hidden" name="on0" value="Early bird pricing!">Early bird pricing!</td></tr><tr><td><select name="os0"> 
        <option value="Member price (before May 11th) - kit, instruction, lunch">Member price (before May 11th) - kit, instruction, lunch $145.00 USD</option> 
        <option value="Member price (before May 11th) - instruction, lunch">Member price (before May 11th) - instruction, lunch $50.00 USD</option> 
        <option value="Non-member price (before May 11th) - kit, instruction, lunch">Non-member price (before May 11th) - kit, instruction, lunch $165.00 USD</option> 
        <option value="Non-member price (before May 11th) - instruction, lunch">Non-member price (before May 11th) - instruction, lunch $60.00 USD</option> 
       </select> </td></tr> 
      </table> 
      <input type="hidden" name="currency_code" value="USD"> 
      <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> 
      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
      </form> 
     </div> 
     <?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?> 
    </body> 

    <style> 
     .hidden { 
      display:none; 
     } 
     .form-group { 
      margin: 2px 0px; 
     } 

     #submitButton { 
      margin: 4px 0px; 
     } 

     body { 
      margin-left: 50px; 
     } 
    </style> 

</html>

来源

2016-04-30 22:02:02

当点击提交按钮时Google窗体脚本调用HTML页面

回答

相关问题