定制提交通知谷歌形式包括在网站

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/