仅当表单完成时才运行.google.script
run.google.script only if form is complete
我试图使用谷歌脚本创建一个表单,除非输入所有字段,否则不允许提交。目前,我使用"onclick"命令来运行一个谷歌脚本,将表单数据和文件发送到我的谷歌驱动器。但是,我只希望在填写了某些字段(标记为必需的字段)的情况下提交表单。如果我从提交按钮的"onclick"部分删除google.script.run命令,那么表单就会创建警告/消息,告诉用户必须填写所需的表单。当包含google.script.run命令时,这些消息不会出现。我还没有找到一种方法来使google.script.run命令只在所有字段都完成时运行。
<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!-- You can also include your own CSS styles -->
<style>
form { margin: 40px auto; }
input { display:inline-block; margin: 20px; }
</style>
<form id="myForm" name="myForm">
<label for="myFirstName"> First Name *</label>
<input type="text" name="myFirstName" placeholder="First name" style="width: 150px;" required>
<fieldset>
<legend> Personal Information </legend>
<div class="inline form-group">
</div>
<div class="inline form-group">
<label for="myLastName"> Last Name* </label>
<input type="text" name="myLastName" placeholder="Last Name" style="width: 150px;" required>
</div>
<div class="inline form-group">
<label for="myEmail"> Email* </label>
<input type="email" name="myEmail" placeholder="" style="width: 150px;" required>
</div>
<div class="inline form-group">
<label for="visa"> Check if you will require visa assistance. Otherwise, ignore. </label>
<input type="checkbox" name="visa" value="Yes">
</div>
</fieldset>
<fieldset>
<legend> Documents </legend>
<div class="inline form-group">
<label for="CV"> CV* </label>
<input type="file" name="CV" required>
</div>
<div class="inline form-group">
<label for="CoverLetter"> Cover Letter </label>
<input type="file" name="CoverLetter">
</div>
</fieldset>
<p> </p>
<input id="submitbutton" type="submit" style="margin-left:450px" value="Submit Application"
onclick="this.value='Submitting...';
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
return false;">
</form>
<div id="output"></div>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
</style>
google脚本运行良好。我还注意到一些关于表单验证的类似问题。谷歌脚本特定的不使用相同的形式格式(他们创建的形式在谷歌脚本)。我想做尽可能小的改变,以实现所需的功能。
如有任何帮助,不胜感激。
jquery当前代码:
$('#submitbutton').on('click', function() {
$(this).val("Validating...");
//check for required fields
var emptyFields = $('[required]').filter(function() {
$(this).removeClass("warning");
if ($(this).val().length === 0){
$(this).addClass("warning")
return true
} else {
return false
}
});
if (emptyFields.length === 0) {
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
} else{
$(this).val("Submit Application")
}
});
在消息出现之前,您的表单正在提交。处理此问题的一种方法是将按钮更改为按钮(而不是键入submit),然后在单击时触发事件。检查您的验证,如果一切通过,提交您的表单。
的例子:
将按钮更改为:
<input id="submitbutton" type="button" style="margin-left:450px" value="Submit Application" >
和点击事件:
$('#submitbutton').on('click', function() {
$(this).val("Validating...");
//check for required fields
var emptyFields = $('[required]').filter(function() {
$(this).removeClass("warning");
return $(this).val().length === 0;
});
if (emptyFields.length > 0) {
emptyFields.addClass("warning");
} else {
google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
$('#myForm').submit();
}
});
CSS 和
.warning {border: 1px solid red; }
相关文章:
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 在gwt HTMLPanel中使用JavaScript运行Google图表
- 在HTML JavaScript头部分运行Google脚本函数
- 在 Google Compute Engine Debian 服务器上运行 Node.js
- 当运行Google“;Hello Analytics"API教程
- 仅通过最后一行运行Google脚本
- 确定 Google 地图 API 在运行时是否使用了无效密钥
- 有没有办法将Google Analytics for Web置于“试运行”模式,例如GA移动SDK
- Google Chrome Jquery onSelect 不会运行
- 从Chrome Extension运行Google Apps脚本
- 阻止 Google App 运行的 JavaScript 行
- Google Apps 脚本在保护多个范围时运行时间非常慢
- “尝试在清除的范围内运行编译和运行脚本” - 使用 Google Graph API 在 Drupal 中出错
- 在应用程序代码上运行Google Closure编译器后,更新AngularJS模板HTML
- 为什么不alert((parseInt(“3”))++);在Google Chrome中运行
- 有没有办法在脚本所有者的授权下运行google docs脚本?
- 仅当表单完成时才运行.google.script
- 在运行Google' Javascript Maps API时可能存在哪些限制?
- 为什么通过Grunt运行Google JavaScript Linter会失败
- 在iframe中运行Google Analytics