2016-07-05 151 views
0

该网站是建立与wordpress,并由于我使用的列表(Aweber服务)的复杂性,我必须使用一个插件已集成因此我的订户可以转到我使用的列表服务。谷歌的recaptcha只提交后提交按钮 - 黑客表单插件

这就是说,我必须不断破解这个插件才能做任何事情,因为不好的支持,并且没有其他的插件可以接近这个。

我已经设法在我的提交按钮下执行谷歌的recaptcha。

<p class="fca_eoi_postbox_0_submit_button_wrapper">{{{submit_button}}}</p> 
    <div class="g-recaptcha" data-sitekey="mysitekey"></div> 

它唉,我已经做了适当的CSS,桃子。

现在我只需要它在点击提交后就可以了。巨大的问题,创建按钮的代码被埋没了,我不能花费无数个小时来测试它的创建位置。所以这个想法被抓了。但这里是按钮的html代码我可以通过检查元素得到:

提交按钮:

<input class="fca_eoi_form_button_element" type="submit" value="Stay Informed"> 

所以作为替代,我发现这个职位:reCAPTCHA - to appear after press submit

我一直在努力实现它:

JS

(function ($) { 
$(".fca_eoi_form_input_element").focus(function() { 
$(".fca_eoi_form_input_element div[id*='g-recaptcha']").css("display:","inline-block"); 
});} 

我不能随便使用$,因为重写它。我对Javascript并不熟悉,所以我可以假设这里有错误。

CSS我验证码:

.g-recaptcha { 
margin:0 auto; 
display:none; 
} 

我在做什么错?

链接到网站http://juniorgoldreport.com/ - 我正在工作的表格是死顶尖的屏幕。

+1

你试过使用jQuery而不是$? – MattDiMu

+0

如果我在评论中使用了答案,如果jQuery不起作用,我会得到一个错误吗? –

回答

2

你有没有安装jQuery?这会防止$从工作 - 如果你这样做,它仍然无法正常工作,使用jQuery而不是$这样的:

jQuery(".fca_eoi_form_input_element").focus(function() { 
jQuery(".g-recaptcha").css("display:","inline-block"); 

如果你不使用jQuery,你需要用纯JavaScript的。

var myInput = document.querySelector(".fca_eoi_form_input_element"); 
var myCaptcha = document.querySelector(".g-recaptcha"); 
myInput.onfocus = function() { 
    myCaptcha.style.display = "inline-block"; 
} 

希望这些帮助之一!

+0

另一个注意事项 - 如果您使用的是jQuery,但它不起作用,您可能在尝试使用jQuery后拉动jQuery,请确保在您的自定义脚本之前调用jQuery! – will

+0

嗯。看到我尝试了这两种方法,都没有奏效。它会发生,我选择的CSS可能无效?而不是该JavaScript/jQuery不工作? –

+0

它看起来像需要有一个不同的选择器为recaptcha(只是.g-recaptcha而不是ID的东西) - 更新了上面的答案!我在您的网站上测试了选项2,并且当我单击任一表单字段时,它使得验证码出现,是否为预期的功能? – will

1

快速查看您的页面,我可以看到jQuery可用。

因此,像这样可以工作:

(function($) { 
    $(document).ready(function() { 
     $(".fca_eoi_form_input_element").on("focus mouseover", function() { 
      $(".g-recaptcha").fadeIn(); 
     }); 
    }); 
})(jQuery); 

虽然我不知道为什么你正在使用的焦点事件。如果您决定修改其行为,则可以使用多个事件。