0

検証Googleフォームを組み込みのWebサイトにして、フォームが送信されたときにカスタム通知を表示しようとしています。

私にとっては、提出された場合は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>

このコードは正しく機能していません... Googleフォーム経由で通知にリダイレクトされます

私は何を間違っていますか？

編集

このコードを使用すると、通知 (#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>

愚かな間違いで申し訳ありませんが、私はこの問題を整理しようとしています

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 に答える