Jquery funktioniert nicht mit Recaptcha

Ich verwende Rails 3.1 und versuche, Recaptcha so einzurichten, dass es nur angezeigt wird, wenn ich auf die Schaltfläche "Senden" in meinem Formular geklickt habe.Jquery funktioniert nicht mit Recaptcha

Ich verwende den folgenden Jquery-Code, um Recaptcha auszublenden, bis Submit angeklickt wird, aber es funktioniert nicht. Könntest du bitte einen Blick darauf werfen und mich wissen lassen, wo ich einen Fehler mache?

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

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

Quelle

2012-04-08 hikmatyar

Ich würde empfehlen, die Ausgabe HTML und zugehörige JS zu jsfiddle.net, so dass andere das Problem sehen können. Es ist durchaus möglich, dass die generierten Tags nicht Ihren Erwartungen entsprechen. – Straseus

@Straseus Ich habe den oben generierten Code hinzugefügt. lassen Sie mich wissen, wenn dies hilft – hikmatyar

Wenn ich dies lokal ausführen, und Web Inspector betrachten, sehe ich den folgenden Kommentar: Uncaught ReferenceError: $ ist nicht definiert; mit einem Verweis auf diesen Code: $ (document) .ready (function() – hikmatyar

Aufbauend auf Tusars Antwort.

Die Verwendung von type='button' sollte die unerwünschte Übermittlung des Formulars beheben, auch wenn JS nicht verfügbar ist.

Die endgültige Submit-Eingabe sollte innerhalb des Formulars sein.

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

Quelle

2012-04-09 06:39:00 miguelr

+1 für 'type =" button "' :) – tusar

@miguelr, danke, aber immer noch nicht funktioniert ... Ich habe meinen geänderten Code oben eingefügt. Problem ist, dass ich immer noch die Recaptcha-Box standardmäßig sehen. – hikmatyar

das funktioniert jetzt .. ich hatte jquery setup früher nicht, also das skript wurde nicht aktiviert, aber alle jetzt eingestellt. Vielen Dank!! – hikmatyar

der Grund, warum ich

first_button ist ein div Behälter is- erraten. Kein Knopf. Wenn Sie den Click-Handler für eine bestimmte Schaltfläche einrichten möchten, geben Sie dieser Schaltfläche eine ID wie any_button, z.

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

Auch Javascript/jQuery-Code sollte immer zwischen <script type="text/javascript">...</script> Tags sein. Ansonsten ist Ihr Code korrekt (klicken Sie auf diesen first_button div, Ihr Re-Captcha sollte sichtbar sein).

Quelle

2012-04-08 20:50:36 tusar

danke! funktioniert immer noch nicht ... siehe Code oben geändert – hikmatyar

auch, da ich fmit jetzt entfernt habe, wird das Formular noch Daten senden, oder nein ? – hikmatyar

i f die 'und sein Container ist umgeben von einem'

' dann wird es sicherlich das Formular abschicken. – tusar

Jquery funktioniert nicht mit Recaptcha

Antwort

Verwandte Themen