0

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

对我来说，如果提交，则需要显示 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) 并且表单已验证但信息未提交到谷歌电子表格

<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>

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

<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>

对于之前的愚蠢错误，我正在努力解决这个问题

4

2 回答 2

1

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

1) 使用 jQuery，您将永远不需要使用内联 JavaScript。任何内联 JavaScript 都可以替换为 jQuery 事件侦听器函数。 请参阅 jQuery.on()。

2) 但是在这种情况下，jQuery Validate 插件已经内置了所有各种事件侦听器。只需使用jQuery Validate 插件的内置submitHandler回调函数。它仅在表单有效时触发。

演示：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
        }
    });

});

演示：http: //jsfiddle.net/cG7RW/1/

于 2013-03-20T04:56:39.603 回答
0

感谢 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>
于 2013-03-20T19:11:38.077 回答