jquery - JqueryがRecaptchaで機能しない

Question

Rails 3.1を使用していて、フォームの[送信]ボタンをクリックしたときにのみ表示されるようにRecaptchaを設定しようとしています。

以下のJqueryコードを使用して、[送信]をクリックするまでRecaptchaを非表示にしていますが、機能していません。見て、どこが間違っているのか教えていただけませんか？

AMENDED_FORM.HTML.ERBファイル

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

score 2 · Accepted Answer

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>

score 1 · Accepted Answer

私が推測する理由は-

first_buttondivコンテナです。ボタンではありません。特定のボタンのクリックハンドラーを設定する場合は、そのボタンに次のような ID を付けます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_buttondiv をクリックすると、再キャプチャが表示されるはずです)。

jquery - JqueryがRecaptchaで機能しない

2 に答える 2

Related

Reference