1

我正在使用 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>
4

2 回答 2

2

基于 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-09T06:39:00.193 回答
1

我猜的原因是——

first_button是一个div容器。不是一个按钮。如果您想为任何特定按钮设置点击处理程序，请为该按钮提供一个 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，您的重新验证码应该可见）。

于 2012-04-08T20:50:36.070 回答