當點擊提交按鈕時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頁面

回答

相關問題