如何获取 javascript 中的 Contact Form 7 字段值？

Question

请帮助我，我已经 javascript 差不多完成了。只有最后一部分非常困难。我使用了 contact form7 的计算器插件来计算 BMI，效果很好。隐藏 BMIhigh 文本也可以，点击

Length (cm):
<label id="centi">[number* cm min:130 max: 220]</label>

Hight (kilo):
<label id="kilo">[number* kilo min:40 max:140]</label>

<label id="calcbutton">[calculate_button "calculate"]</label>

<label id="calc">[calculation calculate precision:1 "kilo / ((cm / 100) * (cm / 100))"]</label> 
<label id="BMIhigh"> 
Your BMI is too high
</label>
[submit "Send"]

在底部我有以下代码：

// Hide the BMIhigh text field by default
document.getElementById("BMIhigh").style.display = 'none';
// On every 'click' on the calculator call the displayTextField function
document.getElementById("calcbutton").addEventListener("click", displayTextField);
  function displayTextField() {
    // Get the inserted values for centi and kilo and calculate the BMI again 
    // for the function without the help of the calculator build in into the extra plugin.
   var centimeter = +document.getElementById("centi").value;
   var kilogram = +document.getElementById("kilo").value;
   var BMIvar = kilogram / ( ( centimeter / 100 ) * ( centimeter / 100 ) );
    // If BMIvar higher than 30 it is too high, the text should show. 
    // THIS LAST PART DOES NOT WORK
    if(BMIvar > 30) {
     document.getElementById("BMIhigh").style.display = 'block';
    } else {
      document.getElementById("BMIhigh").style.display = 'none';
    }
  }
</script> ```

Answer 1

您的变量 BMIvar 从未被评估，因为，

var centimeter = +document.getElementById("centi").value;
var kilogram = +document.getElementById("kilo").value;

这些变量没有正确填充。 CF7将字段标签转换成<span>封装的<input/>字段，

<label id="centi">
  <span class="wpcf7-form-control-wrap cm">
    <input type="number" name="cm" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required">
  </span>
</label>

因此 getElementById returns <label/> 元素而不是 <input/> 元素。 element.value 仅适用于 <input/> 字段。尝试改用 getElementsByName 并将以上两行替换为

var centimeter = 1.0*document.getElementsByName("cm")[0].value;
var kilogram = 1.0*document.getElementsByName("kilo")[0].value;

这里是jsFiddle with a working example.

如何获取 javascript 中的 Contact Form 7 字段值？

How to get Contact Form 7 field values in javascript?

javascript

wordpress

contact-form-7