2016-07-05 150 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); 

雖然我不知道爲什麼你正在使用的焦點事件。如果您決定修改其行爲,則可以使用多個事件。