定製提交通知谷歌形式包括在網站

Question

我嘗試進行驗證谷歌形式內置網站和顯示自定義通知時提交表單。

• 對於表單驗證我使用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）和形式進行了驗證，但沒有信息被提交給一個谷歌電子表格

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

---

當我使用這個代碼 - 表單被驗證，信息被提交到谷歌電子表格，但頁面是redir通過谷歌表單通知。

<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

由於斯帕克的意見。

<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

Answer 2

不能確定你在這裏做什麼，但使用內聯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/