个人中心
gpt4 book ai didi

javascript - 将提交按钮从 "button"更改为 "submit"破坏了我的 Google Apps 脚本

转载 作者：行者123 更新时间：2023-12-03 06:35:05 25 4
gpt4 key购买 nike

我用了this在 Google Apps 中构建一个表单，允许员工填写表单并附加一个文档，所有这些文档都会输入到电子表格中。

我现在的问题是我需要将某些字段设为必填。我通过向这些字段添加“required”属性来做到这一点。这不起作用，所以我意识到我需要将提交按钮从 type="button"更改为 type="submit"，但是，这样做后...我的表单现在不起作用。

我在任何代码中找不到任何指向仅 type="button"可以提交表单的内容。我在下面包含了我的代码，以及我的工作表/脚本的链接(如果有人想在那里查看的话)!

代码.gs

var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
  var fileBlob = theForm.myFile;
  var folder = DriveApp.getFolderById(folderId);
  var doc = folder.createFile(fileBlob);

  // Fill in response template
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  var name = template.name = theForm.name;
  var email = template.email = theForm.email;
  var brand = template.brand = theForm.brand;
  var date = template.date = theForm.date;
  var amount = template.amount = theForm.amount;
  var split = template.split = theForm.split;
  var manufacturer = template.manufacturer = theForm.manufacturer;
  var pace = template.pace = theForm.pace;
  var reason = template.reason = theForm.reason;  
  var category = template.category = theForm.category;
  var subcategory = template.subcategory = theForm.subcategory;
  var message = template.message = theForm.message;   
  var fileUrl = template.fileUrl = doc.getUrl();

  // Record submission in spreadsheet
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl]]);

  // Return HTML text for display in page.
  return template.evaluate().getContent();
}

Form.html

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
    // Javascript function called by "submit" button handler,
    // to show results.
    function updateOutput(resultHtml) {
      toggle_visibility('inProgress');
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = resultHtml;
    }


    // From blog.movalog.com/a/javascript-toggle-visibility/
    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
        e.style.display = 'none';
      else
        e.style.display = 'block';
    }

    //Toggle Secondary Categories
    $(function() {
      $('input[type="radio"]').click(function() {
        if ($(this).attr("id") == "dealer") {
          $(".box").not(".dealer").hide();
          $(".dealer").show();
        }
        if ($(this).attr("id") == "online") {
          $(".box").not(".online").hide();
          $(".online").show();
        }
        if ($(this).attr("id") == "advertising") {
          $(".box").not(".advertising").hide();
          $(".advertising").show();
        }
        if ($(this).attr("id") == "pricing") {
          $(".box").not(".pricing").hide();
          $(".pricing").show();
        }
        if ($(this).attr("id") == "correspondence") {
          $(".box").not(".correspondence").hide();
          $(".correspondence").show();
        }
        if ($(this).attr("id") == "meetings") {
          $(".box").not(".meetings").hide();
          $(".meetings").show();
        }
        if ($(this).attr("id") == "other") {
          $(".box").not(".other").hide();
          $(".other").show();
        }
      });
    });

    //Calculate Split
    function check(split)
    {
    var split=document.forms[0].split.value
    var amount=document.forms[0].amount.value
    var tip = (amount*split) 
    document.forms[0].manufacturer.value=tip 
    var tip2 = (amount-tip)
    document.forms[0].pace.value=tip2
    }
  </script>

  <div id="formDiv" class="form">
    <!-- Form div will be hidden after form submission -->
    <form id="myForm">

<div class="row">

<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
      <h4>Name:</h4> <input name="name" type="text" class="form-control" required/><br/>
      <h4>Email:</h4> <input name="email" type="text" class="form-control"required/><br/>
<h3>Co-Op Information</h3>
       <h4>Brand:</h4>
      <select name="brand" class="form-control" required>
        <option>Select Option</option>
        <option>Bluebird</option>
        <option>Brown</option>
        <option>Ferris</option>
        <option>Giant Vac</option>
        <option>Honda</option>
        <option>Hurricane</option>
        <option>Jonsered</option>
        <option>Little Wonder</option>
        <option>RedMax</option>
        <option>SCAG</option>
        <option>Snapper Pro</option>
        <option>Sno-Way</option>
        <option>SnowEx</option>
        <option>Wright</option>
        <option>Ybravo</option>
      </select><br/>
      <h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
     <h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
      <h4>Co-Op Split:</h4>
      <input type="radio" name="split" onclick="check(this.value)" value="1">100%<br> 
      <input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br> 
      <input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
      <input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />

<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >

      <h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control" required/><br />

      <h4>Co-Op Category:</h4>
      <input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
      <input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
      <input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
      <input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
      <input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
      <input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
      Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
      <div class="dealer box" style="display:none;">
      <h4>Dealer Advertising:</h4>
 <input type="radio" name="subcategory" value="Billboards">Billboards<br />
 <input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
 <input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
 <input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
 <input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
 <input type="radio" name="subcategory" value="Radio">Radio<br />
 <input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
 <input type="radio" name="subcategory" value="TV">TV<br />
 <input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
 <input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
      </div>

<!--Digital/Online Advertising-->
      <div class="online box" style="display: none;">
       <h4>Digital/Online Marketing:</h4>
         <input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
         <input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
      </div>

<!--Meetings and Schools-->
      <div class="meetings box" style="display: none;">
      </div>

<!--PACE Advertising-->
      <div class="advertising box" style="display: none;">
         <h4>PACE Advertising:</h4>
          <input type="radio" name="subcategory" value="Billboards">Billboards<br />
          <input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
          <input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
          <input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
    </div>

<!--Program Pricing Promotions-->
      <div class="pricing box" style="display: none;">
        <h4>Program Pricing Promotions:</h4>
          <input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />   
          <input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />          
          <input type="radio" name="subcategory" value="Demo">Demo<br />  
          <input type="radio" name="subcategory" value="Fleet">Fleet<br />   
          <input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />  
      </div>

<!--PACE-to-Dealer Correspondence-->
      <div class="correspondence box" style="display: none;">
        <h4>PACE-to-Dealer Correspondence:</h4>
            <input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br /> 
            <input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br /> 
      </div>



      <h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
      <h4> Supporting Documentation:</h4><input name="myFile" type="file"/><br />
      <input type="submit" value="Submit" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
    </form>

      <div id="inProgress" style="display: none;">
    <!-- Progress starts hidden, but will be shown after form submission. -->
    Uploading. Please wait...
  </div>

  <div id="output">
    <!-- Blank div will be filled with "Thanks.html" after form submission. -->
  </div>


  </div>
<!--Begin Footer-->
     <div class="footer">
        <div class="bottomStrip">
          <div class="col-lg-3 col-lg-push-1">&copy; <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
          <div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
        </div>
    </div>
<!--End Footer-->
</body>
</html>

The Sheet (我确实删除了“姓名”和“电子邮件”列中的所有内容，因为其中包含我的几个同事的全名和电子邮件地址!)

最佳答案

输入“提交”按钮上有一个 onclick 处理程序: google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode)

提交表单将使用此脚本，而不是默认的输入提交行为。因此，当您将按钮类型更改为提交时，您必须更改脚本以防止触发默认提交行为。

关于javascript - 将提交按钮从 "button"更改为 "submit"破坏了我的 Google Apps 脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38269222/

25 4 0
文章推荐： javascript - 使用 Javascript 访问 GridView 页脚中的标签控件
文章推荐： razor - 如何使用 razor 语法动态向 html 元素添加类？
文章推荐： jquery-ui - 在jqueryui datepicker内联模式下获取选定的日期
文章推荐： javascript - 我如何使用PHP中的MAC地址跟踪个人电脑和笔记本电脑的谷歌地图上的位置？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com