Jquery沒有使用Recaptcha

我正在使用Rails 3.1，並試圖設置Recaptcha，以便它只顯示一次我點擊了我的表單上的「提交」按鈕。Jquery沒有使用Recaptcha

我使用下面的Jquery代碼來隱藏Recaptcha，直到點擊提交，但它不起作用。你可以看一看，讓我知道我犯了什麼錯誤嗎？

AMENDED_FORM.HTML.ERB FILE

<%= form_for(@post) do |f| %> 
<% if @post.errors.any? %> 
<div id="error_explanation"> 
<h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved: </h2> 

<ul> 
<% @post.errors.full_messages.each do |msg| %> 
<li><%= msg %></li> 
<% end %> 
</ul> 
</div> 
<% end %> 
<div class="field"> 
I am a <%= f.text_field :title %> getting married in <%= f.text_field :job %> in <%= f.text_field :location %>, and looking for a wedding photographer. My budget is <%= f.text_field :salary %>. 

</div> 

<form> 
<div id="first_button"> 
<button type="button" id="your_button" class="btn span6 large">Submit</button> 
</div> 

<div id="real_form"> 
<%= recaptcha_tags %> 
<button type='submit'>Submit</button> 
</div> 

</form> 

<script> 
    $(document).ready(function() { 
    $('#real_form').hide(); //this will hide the `real_form` div on page load 
    $('#your_button').click(function() { 
     $('#real_form').show(); // this will show the `real_form` on clicking of `any_button` button 
}); 
}); 
</script> 

<% end %>

生成的HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Weddoo!</title> 
<meta content="authenticity_token" name="csrf-param" /> 
<meta content="70/JjhjToEdAoKm67QZAUTZHj2pA2F/mUKJGRIECfN0=" name="csrf-token" /> 

<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" /> 

<link href="images/favicon.ico" rel="shortcut icon"> 
<link href="images/apple-touch-icon.png" rel="apple-touch-icon"> 
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"> 
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"> 
</head> 
<body> 

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
<div class="container"> 
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</a> 
<a class="brand" href="/posts/new">Weddoo!</a> 
<div class="container nav-collapse"> 
     <ul class="nav"> 
      <li><a href="/posts/new">Home</a></li> 
      <li><a href="/posts">Jobs</a></li> 
      <li><a href="/pages/about">About</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="content"> 
    <div class="row"> 
      <div class="hero-unit"> 
<h1>Find wedding photographers with ease.</h1> 
<br> 
<p>Post your needs and sit back and wait to get responses.</p> 
<br> 
<form accept-charset="UTF-8" action="/posts" class="new_post" id="new_post" method="post">  

<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="70/JjhjToEdAoKm67QZAUTZHj2pA2F/mUKJGRIECfN0=" /></div> 

<div class="field"> 
I am a <input id="post_title" name="post[title]" size="30" type="text" /> getting married in <input id="post_job" name="post[job]" size="30" type="text" /> in <input id="post_location" name="post[location]" size="30" type="text" />, and looking for a wedding photographer. My budget is <input id="post_salary" name="post[salary]" size="30" type="text" />. 
</div> 

<form> 
<div id="first_button"> 
<button type="button" id="your_button" class="btn span6 large">Submit</button> 
</div> 

<div id="real_form"> 
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge? k=6LdR788SAAAAAGvr99xGjlbkFVq3-hlCjjlrFX-s&amp;error=expression"></script> 
<noscript> 
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdR788SAAAAAGvr99xGjlbkFVq3-hlCjjlrFX-s" height="300" width="500" style="border:none;"></iframe><br/> 

<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> 

<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/></noscript> 

<button type='submit'>Submit</button> 
</div> 
</form> 
<script> 
    $(document).ready(function() { 
    $('#real_form').hide(); //this will hide the `real_form` div on page load 
    $('#your_button').click(function() { 
     $('#real_form').show(); // this will show the `real_form` on clicking of `any_button` button 
    }); 
}); 
</script> 
</form> 
</div> 

</div><!--/row--> 
</div><!--/content--> 

</div> <!-- /container --> 

<!-- Le javascript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript">  </script> 
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"> </script> 
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script> 
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 

</body> 
</html>

來源

2012-04-08 hikmatyar

我建議發佈輸出HTML和關聯JS到jsfiddle.net，以便其他人可以看到問題。這很有可能，所生成的標籤不符合您的期望。 – Straseus 2012-04-09 09:40:22

@Straseus我在上面添加了生成的代碼。讓我知道如果這有幫助 – hikmatyar 2012-04-09 10:21:51

當我在本地運行，並看看Web Inspeactor，我看到以下評論：未捕獲ReferenceError：$未定義;引用這段代碼：$（document）.ready（function（） – hikmatyar 2012-04-09 10:30:54

建立在tusar的答案。

使用type='button'應該修復不需要的表單提交，即使JS不可用。

最終的提交輸入應該在表單內。

<form> 
    <div id="first_button"> 
    <button type='button' id="your_button" class="btn span6 large"> 
     Submit 
    </button> 
    </div> 

    <div id="real_form"> 
    CONTENT OF RE-CAPTCHA 
    <button type='submit'>Real Submit</button> 
    </div> 
</form> 
<script> 
    $(document).ready(function() { 
    $('#real_form').hide(); 
    $('#your_button').click(function() { 
     $('#real_form').show(); 
    }); 
    }); 
</script>

來源

2012-04-09 06:39:00 miguelr

對於'type =「按鈕」':) +1 – tusar 2012-04-09 07:05:32

@miguelr，謝謝，但仍然無法正常工作......我粘貼了上面修改後的代碼。問題是我仍然默認看到了recaptcha盒子。 – hikmatyar 2012-04-09 09:06:27

這個工作現在..我沒有更早的jquery設置，所以腳本沒有被激活，但現在所有設置。謝謝！！ – hikmatyar 2012-04-09 19:28:39

我猜是 -

first_button的原因是div容器。不是一個按鈕。如果你想設置任何特定按鈕的點擊處理程序，給該按鈕一個像any_button

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#real_form').hide(); //this will hide the `real_form` div on page load 
     $('#any_button').click(function() { 
      $('#real_form').show(); // this will show the `real_form` on clicking of `any_button` button 
     }); 
    }); 
</script>

此外，javascript/jQuery代碼總是應該在<script type="text/javascript">...</script>標籤之間。除此之外，你的代碼是正確的（點擊first_button股利，你的重新驗證碼應該是可見的）。

來源

2012-04-08 20:50:36 tusar

感謝！仍然沒有工作，雖然...看到上面的修改代碼 – hikmatyar 2012-04-09 04:25:27

也因爲我現在已經刪除了f.submit，表單是否仍然提交數據，或不？ – hikmatyar 2012-04-09 04:29:06

i f''按鈕類別=「btn span6 large」>提交'並且它的容器被'

'包圍，那麼它肯定會提交表單。 – tusar 2012-04-09 06:08:44

Jquery沒有使用Recaptcha

回答

相關問題