如何自定义&验证Google文档表单（更简单的方法？） [英] How to Customize & Validate Google Docs Form (an easier way?)
本文介绍了如何自定义&验证Google文档表单（更简单的方法？）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在寻找一种方法来定制和验证Google表单，最后我的演示页面在线并完美运行！
我也创建了一个关于如何定制和验证的分步教程。但是，所有这些过程花费了大量时间在google / stackoverflow上搜索解决方案和代码片段。
所以我的问题：是否有更简单的方法或更好的编码方式做这个？我的答案中的代码是否可以应用于更好的表单模板？我读过这篇 :: post :: 在回答我的问题之前。所以我想这是允许的......
-
我的表单演示页面： :: link ::
p>教程页面： :: link ::
-
解决方案
，我的问题的源代码。有关代码的详情和信息在我的博客文章中给出： Google Form Customization&验证教程
以下是链接：表单演示页面
< title>演示Google表单< / title>
< style>
body {}
#pagewrap {}
.tableradio {}
.sbutton {}
.sbutton：hover {}
.sbutton：active { }
a {}
a：hover {}
< / style>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css/>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.3/jquery-ui.js>< / script>
< script>
$（function（）{
$（#dialog）.dialog（{
autoOpen：false，
show：{
效果：blind，
duration：1000
}，
hide：{
effect：blind，
duration：1000
}
}）;
}）;
< / script>
< script>
函数validateForm（）
{
var x = document.forms [myForm] [entry.1178504574] .value;
var y = document.forms [myForm] [entry.1736977247] .value;
if（x == null || x ==|| x ==Enter Full Name|| y == null || y ==|| y ==Your Email or Phone ）
{
$（function（）{
$（#dialog）.dialog（open）;
}）;
返回false;
}
else {
submitted = true;
}
}
< / script>
< / head>
< body>
< div id =pagewrap>
< h4>< br> Google Form Customization& amp; amp; amp; amp;验证和LT; / H4>
< script type =text / javascript> var submitted = false;< / script>
< ol style =padding-left：0>
< div dir =ltr>< label for =entry_1178504574>名称
< label for =itemView.getDomIdToLabel（）aria-label = （必填字段）>< / label>
< span> < /跨度>< / DIV>
< input type =textname =entry.1178504574value =输入全名id =entry_1178504574dir =autoaria-required =trueonfocus =if（this。值=='输入全名'）this.value ='';>
< div dir =ltr>< label for =entry_1736977247>联络人资讯
< / div>
< input type =textname =entry.1736977247value =您的电子邮件或电话号码 id =entry_1736977247dir =autoonfocus =if（this.value =='Your Email or Phone No.'）this.value ='';>
< div dir =ltr>< label for =entry_1735394145>评论
< / div>
< textarea name =entry.1735394145rows =8cols =0id =entry_1735394145dir =auto>< / textarea>
< div align =left>
< div dir =ltr>< label for =entry_69751737>< br>本教程有帮助吗？
< / div>< br>
< div dir =ltr>< / label>
< table class =tableradioborder = 0>
< tr>
< td>
< input id =group_966319296_1name =entry.966319296type =radiovalue =Yesaria-label =Yes>
< label>< br>是< / label>
< / td>
< td>
< input type =radioname =entry.966319296value =Noid =group_966319296_2aria-label =No>
< label>< br>否< / label>
< / td>
< / tr>
< / table>
< p> < input type =hiddenname =draftResponsevalue =[]>
< input type =hiddenname =pageHistoryvalue =0>
< div dir =ltr>
< input type =submitname =submitvalue =Confirmclass =sbutton>
< / div>< / ol>< / form>
< / p>
< p>< br>
< a href =＃onClick ='window.location =view-source：+ window.location.href'>查看源代码< / a>
< / p>
< / div>
< / div>
< / div>
< div id =dialogtitle =错误！>必须输入
< p>姓名和联系信息。< br>输入任何内容。这只是教程的演示！< / p>
< / div>
< / div>
I've been searching for a way to customize and validate a Google Form, and finally my demo page is online and perfectly working!
I've also created a step-by-step tutorial on how to customize and validate. But all this process took lot of time searching for solutions and snippets of code on google / stackoverflow.
So my question: Is there an easier way or a better coded way to do this? Can the code in my answer be applied to better form templates?
I've read this ::post:: on stackoverflow, before answering my questions. So I guess it's allowed...
-
解决方案
Here's the answer, source code to my question. Details and info on the code is given at my blog post on my website blog post: Google Form Customization & Validation Tutorial
Here's the link to the : Form Demo Page
<title>Demo Google Form</title>
<style>
body{}
#pagewrap {}
.tableradio {}
.sbutton {}
.sbutton:hover {}
.sbutton:active {}
a{}
a:hover{}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
});
</script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["entry.1178504574"].value;
var y=document.forms["myForm"]["entry.1736977247"].value;
if (x==null || x=="" || x=="Enter Full Name" || y==null || y=="" || y=="Your Email or Phone No.")
{
$(function() {
$( "#dialog" ).dialog( "open" );
});
return false;
}
else {
submitted=true;
}
}
</script>
</head>
<body>
<div id="pagewrap">
<h4>Demo form for the <br>Google Form Customization & Validation</h4>
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='a_thankyou.htm';}"></iframe>
<form name="myForm" action="https://docs.google.com/forms/d/Us3y0uR0WNg00GL3f0RmC0D3/formResponse" method="POST" target="hidden_iframe" onsubmit="return validateForm()">
<ol style="padding-left: 0">
<div dir="ltr"><label for="entry_1178504574">Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
<span> </span></div>
<input type="text" name="entry.1178504574" value="Enter Full Name" id="entry_1178504574" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">
<div dir="ltr" ><label for="entry_1736977247">Contact Info
</div>
<input type="text" name="entry.1736977247" value="Your Email or Phone No." id="entry_1736977247" dir="auto" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">
<div dir="ltr"><label for="entry_1735394145">Comments
</div>
<textarea name="entry.1735394145" rows="8" cols="0" id="entry_1735394145" dir="auto"></textarea>
<div align="left">
<div dir="ltr"><label for="entry_69751737"><br>Was this tutorial helpful?
</div><br>
<div dir="ltr"></label>
<table class="tableradio" border=0>
<tr>
<td>
<input id="group_966319296_1" name="entry.966319296" type="radio" value="Yes" aria-label="Yes">
<label><br>Yes</label>
</td>
<td>
<input type="radio" name="entry.966319296" value="No" id="group_966319296_2" aria-label="No">
<label><br>No</label>
</td>
</tr>
</table>
<p> <input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">
<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>
</p>
<p><br>
<a href="#" onClick='window.location="view-source:" + window.location.href'>View Source</a>
</p>
</div>
</div>
</div>
<div id="dialog" title="Error!">
<p>Name and Contact Info must be entered.<br>Just type anything. It's just a demo for the tutorial anyways!</p>
</div>
</div>
这篇关于如何自定义&验证Google文档表单（更简单的方法？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
