Question

我有一个我为课程注册创建的Google表单。我正在编写我的第一个Google脚本（基于我从Google教程材料中学到的内容），当用户单击“提交”按钮触发onSubmit事件时，调用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>

脚本通过单元测试但在测试表单时没有被调用。有关如何完成此任务的任何想法或建议？打开关于解决方法的建议以及我应该修改代码的位置。

Answer 1

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

示例网络应用 Web App

<强>部署：

制作新的Google 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>

单击“提交”按钮时，Google表单脚本调用HTML页面

1 个答案: