Question

我尝试验证google表单内置网站，并在提交表单时显示自定义通知。

对于表单验证，我使用jquery validation plugin - 一切正常大。
我找到了如何使用catching on submit and show notification in iframe

对于我来说，如果提交，则需要显示div和隐藏表单。

<script type="text/javascript">
$().ready(function() {

   $("#ss-form").validate({meta: "validate"});

   function showHide() {
      $('#form_is_submitted').css('display', 'block');
      $('#ss-form').css('display', 'none');
   }
});
</script>

<div id="form_is_submitted" style="display:none;">ok! form is submitted</div>

<form action="spreadsheet link" id="ss-form" method='post' onsubmit="showHide(); return false;">
                               ...form code...
</form>

此代码无效...... 被重定向到通过谷歌表格的通知

我做错了什么？

修改

当我使用此代码时 - 我看到我的通知（#form_is_submitted）并且表单已经过验证，但信息未提交给Google电子表格

<script type="text/javascript">
   $(document).ready(function () {

    $('#ss-form').validate({ 
        submitHandler: function (form) {
            $('#form_is_submitted').css('display', 'block');
            $('#ss-form').css('display', 'none');
        }
    });


});

    </script>

    <div id="form_is_submitted" style="display:none;">ok! form is submitted</div>

    <form action="spreadsheet link" id="ss-form" method='post'>
                                   ...form code...
    </form>

当我使用此代码时 - 表单已经过验证，信息已提交给Google电子表格，但页面已重定向到Google表单通知。

<script type="text/javascript">
   $(document).ready(function () {

    $("#ss-form").validate({meta: "validate"});

   });

 </script>

    <div id="form_is_submitted" style="display:none;">ok! form is submitted</div>

    <form action="spreadsheet link" id="ss-form" method='post'>
                                   ...form code...
    </form>

为了早些时候抱歉愚蠢的错误，我正在尝试解决这个问题

Answer 1

不确定你在这里做什么，但使用内联onSubmit处理程序是完全多余的和不必要的。

1）使用jQuery，您永远不需要使用内联JavaScript。任何内联JavaScript都可以用jQuery事件监听器函数替换。 See jQuery .on()

2）但是在这种情况下，jQuery Validate插件已经内置了所有各种事件侦听器。只需使用the built-in submitHandler callback function of the jQuery Validate plugin即可。只有在表格有效时才会触发。

DEMO：http://jsfiddle.net/eP7kS/

$(document).ready(function () {

    $('#ss-form').validate({ 
        // your rules and options,
        submitHandler: function (form) {
            $('#form_is_submitted').css('display', 'block');
            $(form).css('display', 'none');
            return false;
        }
    });

});

修改

你从未清楚地解释过你想要做什么。但是，听起来你想要jQuery .ajax，而且它也会进入submitHandler。

$(document).ready(function () { $('#ss-form').validate({ // your rules and options, submitHandler: function (form) { $(form).ajax({ url: 'spreadsheet link', // whatever url to your action data: $(form).serialize(), // the form data success: function () { $('#form_is_submitted').css('display', 'block'); $(form).css('display', 'none'); } }); return false; // this is critical to prevent the page from reloading } }); });

DEMO：http://jsfiddle.net/cG7RW/1/

Answer 2

感谢Sparky的建议。

<style>
#hidden_iframe,
#form_is_submitted{
    display: none;
}
</style>

<script>
    $(document).ready(function () {

        $("#ss-form").validate({meta: "validate"});

        $('#ss-form').submit(function () {
            if ($("#ss-form").valid() == true) { 
               $('#form_is_submitted').css('display', 'block');
               $("#ss-form").css('display', 'none');
               return true;
            }
        });

   });
</script>

<div id="form_is_submitted">ok!</div>

<iframe name="hidden_iframe" id="hidden_iframe"></iframe>

<form action="google_form_link" method="POST" id="ss-form" target="hidden_iframe">

    ..form code..

</form>

的 spreadsheet

的 form

的 jsfiddle

自定义提交网站中包含的Google表单通知

2 个答案: