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

huangapple go评论86阅读模式
英文:

How to get Contact Form 7 field values in javascript?

问题

这是你提供的JavaScript代码的中文翻译:

// 默认隐藏BMI高文本字段
document.getElementById("BMIhigh").style.display = 'none';
// 在计算器上的每次点击调用displayTextField函数
document.getElementById("calcbutton").addEventListener("click", displayTextField);
function displayTextField() {
  // 获取centi和kilo的输入值,重新计算BMI
  // 对于没有额外插件内置计算器功能的函数。
  var centimeter = +document.getElementById("centi").value;
  var kilogram = +document.getElementById("kilo").value;
  var BMIvar = kilogram / ((centimeter / 100) * (centimeter / 100));
  // 如果BMIvar大于30,则显示文本。
  // 这是最后一部分不起作用的地方。
  if (BMIvar > 30) {
    document.getElementById("BMIhigh").style.display = 'block';
  } else {
    document.getElementById("BMIhigh").style.display = 'none';
  }
}

请注意,这是提供的代码的翻译版本,没有其他内容。

英文:

Please help me, i've the javascript allmost done. Only the last part is very difficult.
I've used the calculator plugin for contact form7, to calculate the BMI, this works perfectly.
To hide the BMIhigh text also works, and the click

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

At the bottom i've got the following code:

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

</details>


# 答案1
**得分**: 1

Your variable BMIvar never get evaluated because,

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

these variables are not being populated properly. CF7 converts field tags into `<span>` encapsulated `<input/>` fields,

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

and as such `getElementById` returns the `<label/>` element and not the `<input/>` one. `element.value` only works for `<input/>` fields. Try instead to use [getElementsByName][1] and replace the above 2 lines with,

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

Here is a [jsFiddle with a working example][2].

[1]: https://stackoverflow.com/questions/10306129/javascript-get-element-by-name
[2]: https://jsfiddle.net/p74ueswf/6/

<details>
<summary>英文:</summary>

Your variable BMIvar never get evaluated because,

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

these variables are not being populated properly.  CF7 converts field tags into `&lt;span&gt;` encapsulated `&lt;input/&gt;` fields,

    &lt;label id=&quot;centi&quot;&gt;
      &lt;span class=&quot;wpcf7-form-control-wrap cm&quot;&gt;
        &lt;input type=&quot;number&quot; name=&quot;cm&quot; value=&quot;&quot; class=&quot;wpcf7-form-control wpcf7-number wpcf7-validates-as-required&quot;&gt;
      &lt;/span&gt;
    &lt;/label&gt;

 and as such `getElementById` returns the `&lt;label/&gt;` element and not the `&lt;input/&gt;` one.  `element.value` only works for `&lt;input/&gt;` fields.  Try instead to use [getElementsByName][1] and replace the above 2 lines with,

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

Here is a [jsFiddle with a working example][2].


  [1]: https://stackoverflow.com/questions/10306129/javascript-get-element-by-name
  [2]: https://jsfiddle.net/p74ueswf/6/

</details>



huangapple
  • 本文由 发表于 2020年1月4日 00:14:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/59581805.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定