使用Javascript验证Google应用程序表单
Validating a Google Apps Form with Javascript
我使用此解决方案将表单中的输入和图像提交馈送到Google Drive上的Google工作表和文件夹中。
我需要验证一些字段——只需要填写它们。不幸的是，我使用的解决方案使用type="button"来提交表单，而不是type="submit"，而且我在Javascript方面还不够熟练，无法更改这一点。
然而，我找到了这个使用type="button"submit验证表单的解决方案，但它不起作用。实现后，我的表单什么都不做——不验证，不提交。
这是我正在努力工作的Javascript的一部分：
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
它在我浏览器中的普通HTML中运行良好，但在谷歌应用程序中不起作用，所以我假设有一些逗号或错误的地方，因为谷歌似乎有不同的JS要求？
我的其余代码和表单/脚本的链接如下：
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() {
$(".box").not("." + this.id).hide(); $("." + this.id).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
};
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
</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 mustHave"/><br/>
<h4>Email:</h4> <input name="email" type="text" class="form-control mustHave"/><br/>
<h3>Co-Op Information</h3>
<h4>Brand:</h4>
<select name="brand" class="form-control">
<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 mustHave"/><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="myFile1" type="file"/>
<a onclick="document.getElementById('div1').style.display='';return false;" href="">Submit More</a><br />
<div id="div1" style="display:none;margin: 15px 0;">
<input name="myFile2" type="file"/>
<a onclick="document.getElementById('div2').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div2" style="display:none;margin: 15px 0;">
<input name="myFile3" type="file"/>
<a onclick="document.getElementById('div3').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div3" style="display:none;margin: 15px 0;">
<input name="myFile4" type="file"/>
<a onclick="document.getElementById('div4').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div4" style="display:none;margin: 15px 0;">
<input name="myFile5" type="file"/><br /></div>
<br />
<input type="button" value="Validate" id="btn" 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. -->
<div class="uploading">Uploading. Please wait...</div>
</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>
代码.gs
var submissionSSKey = '1e56M0GL6649pVW0SUwZDR8CjuyTqEwrkAUUWYVmiOpk';
var folderId = "0B3YZCO2xGxYFdHV4Q2pvY0U4d0U";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob1 = theForm.myFile1;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var fileBlob5 = theForm.myFile5;
var folder = DriveApp.getFolderById(folderId);
var doc1 = folder.createFile(fileBlob1);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
var doc5 = folder.createFile(fileBlob5);
// 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 fileUrl1 = template.fileUrl1 = doc1.getUrl();
var fileUrl2 = template.fileUrl2 = doc2.getUrl();
var fileUrl3 = template.fileUrl2 = doc3.getUrl();
var fileUrl4 = template.fileUrl2 = doc4.getUrl();
var fileUrl5 = template.fileUrl2 = doc5.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 17).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl1,fileUrl2,fileUrl3,fileUrl4,fileUrl5]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
链接到图纸
根据这个SO问题，在type="button"中，按钮不会提交表单，默认情况下也不会做任何事情。它们通常与JavaScript一起使用，作为AJAX应用程序的一部分，而type="submit"按钮将在用户单击它们时提交它们所处的表单，除非您使用JavaScript另行指定。
我建议使用type="submit"而不是type="button"，因为当它位于表单元素内时，它会在单击时提交表单，如本文档所述。
希望这能有所帮助！
相关文章：
- 使用jquery调用vaadin应用程序表单php
- 仅在引导程序表单助手国家/地区选取器中显示国家/地区子集文本
- 如何初始化Twitter引导程序表单助手日期选择器
- 提交Chrome扩展程序表单
- 运行代码以在Android应用程序中单击javascript按钮?尝试在页面上抓取回复按钮联系信息 craigslist
- 在 React 应用程序中单击除特定 DOM 节点之外的任何内容上的事件
- 如何在 MVC 应用程序中单击标签时选中所有复选框
- 在Android手机间隙应用程序中单击后退按钮时强制关闭
- 无法通过 Ajax 将 CSS 应用于表单输入
- 如何将 IF 语句应用于表单的<选择>关系
- 如何在使用 PhoneGap/Cordova 构建的 Android 应用程序中单击按钮时播放音频
- 如何在绘图应用程序上单击颜色时播放声音
- 如何在phonegap android中动态应用id表单
- 在aspx中为应用程序表单创建选项卡
- 如何在Rails应用程序中单击link_to标记后用JS刷新浏览器
- 当在asp.net web应用程序中单击启用了onserverclick的html按钮时，停止表单提交
- 在我的react/redux应用程序中单击按钮时发出一个简单的get请求
- Cordova应用程序表单输入字段在输入时显示数据滞后
- Web 应用程序 - 定时单击 Web 表单
- 使用Javascript验证Google应用程序表单
