包括JS以聯系Form 7 Wordpress

Question

您可能會認為問題出在將js包含到著名的wordpress插件中-聯系表格7。

我的表格如下所示：

<label>[text* your-name] </label>
<label>[email* your-email]</label>
<label>[number number-189 min:500000000 max:900000000 id:numertel class:numertel1]</label> //this is telephone number
<label>[text* your-subject] </label>
<label>[textarea* your-message] </label>
[submit id:przycisk "Send"]

來自stackoverflow的用戶幫助我修復了我的JS代碼，該代碼應在電話號碼長度為9或10時啟用提交按鈕。

這是JS代碼：

document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});

我從瀏覽器的“檢查元素”選項中看到的插件生成的HTML：

<input type="number" name="number-189" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number numertel1" id="numertel" min="500000000" max="900000000" aria-invalid="false">
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" id="przycisk">

代碼可以完美地工作，但是我不知道如何將他包含在插件中，因為這樣不起作用：

<label>[text* your-name] </label>
<label>[email* your-email]</label>
<label>Telephone[number number-189 min:500000000 max:900000000 id:numertel class:numertel1]</label>
<label>[text* your-subject] </label>
<label>[textarea* your-message] </label>
[submit id:przycisk "Send"]
<script>
document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});
</script>

Answer 1

您可以為給定的JS代碼創建其他簡碼，然后將其插入（而不是插入，但要插入）聯系表格7標簽之后。

所以看起來像這樣

[contact-form-7 id =“ 122” title =“與我們聯系”] [custom_js_for_cf7]

這是為此的短代碼，您可以將其添加到functions.php中：

add_shortcode('custom_js_for_cf7','custom_js_for_cf7');
function custom_js_for_cf7($args){
return '
<script>
document.getElementById("przycisk").disabled = true;
document.getElementById("numertel").addEventListener("keyup", function() {
  var numerlength = this.value.length;
  if (numerlength == 10 || numerlength == 9)
    document.getElementById("przycisk").disabled = false;
  else
    document.getElementById("przycisk").disabled = true;
});
</script>
';
}