我使用this在Google Apps中构建表单，该表单允许员工填写表单并附上所有文稿，并将其全部输入电子表格。
我现在的问题是我需要制作某些字段。我这样做是通过向这些字段添加“required”属性。这没用，所以我意识到我需要将提交按钮从type =“button”更改为type =“submit”，但是，这样做...我的表单现在不起作用。
我找不到任何指向只有type =“button”工作提交表单的代码。 我已经在下面提供了我的代码，以及我的工作表/脚本的链接，如果有人想在那里逛逛的话！
Code.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">© <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（我确实删除了“姓名”和“电子邮件”列中的所有内容，因为其中包含了我的几位同事的全名和电子邮件地址！）
答案 0 :(得分：1)
输入'submit'按钮上有一个onclick处理程序：
google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode)
提交表单将使用此脚本，而不是默认的输入提交行为。因此，当您将类型从按钮更改为提交时，您必须更改脚本以防止触发默认提交行为。