2

我一直在寻找一种自定义和验证 Google 表单的方法，最后我的演示页面上线并且完美运行！

我还创建了一个关于如何自定义和验证的分步教程。但是所有这些过程都花费了大量时间在 google/stackoverflow 上搜索解决方案和代码片段。

所以我的问题是：有没有更简单的方法或更好的编码方法来做到这一点？我的答案中的代码可以应用于更好的表单模板吗？

在回答我的问题之前，我已经在 stackoverflow 上阅读了这个::post:: 。所以我想这是允许的......

-

4

1 回答 1

4

这是我的问题的答案，源代码。有关代码的详细信息和信息，请参阅我的网站博客文章中的博客文章：Google 表单自定义和验证教程

这是指向：表单演示页面的链接

<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 &amp; 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>
于 2013-06-27T19:07:11.350 回答