【问题标题】:How to get Contact Form 7 field values in javascript?如何在 javascript 中获取联系表 7 字段值?
【发布时间】:2020-01-14 19:53:17
【问题描述】:

请帮助我,我已经完成了 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> ```

【问题讨论】:

  • 您的问题含糊不清,尚不清楚您要达到的目标。请阅读问题guidelines,了解如何最大限度地提高获得帮助的机会。
  • 我想要一个 BMI 计算器,当 BMI 高于 30 时,应该出现文本元素。只有代码的最后一部分不起作用。我不明白为什么。感谢您的帮助!
  • 您是否尝试过使用debugger in the javascript console 单步执行您的代码?

标签: javascript wordpress contact-form-7


【解决方案1】:

您的变量 BMIvar 永远不会被评估,因为,

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

这些变量未正确填充。 CF7将字段标签转换成&lt;span&gt;封装&lt;input/&gt;字段,

<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 返回&lt;label/&gt; 元素而不是&lt;input/&gt; 元素。 element.value 仅适用于 &lt;input/&gt; 字段。尝试改用getElementsByName 并将上述两行替换为,

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

这是jsFiddle with a working example

【讨论】:

  • 感谢您的宝贵时间,它似乎不起作用。这是厘米部分的源代码:Lengte (cm):&lt;br&gt; &lt;label id="centi"&gt;&lt;span class="wpcf7-form-control-wrap cm"&gt;&lt;input type="number" name="cm" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number" min="130" aria-required="true" aria-invalid="false"&gt;&lt;/span&gt;&lt;/label&gt;
  • 我意识到我在代码中犯了一个错字,我已经修复了这个问题并添加了一个有效的 jsFiddle 示例。
猜你喜欢
  • 1970-01-01
  • 2021-11-14
  • 2014-07-26
  • 2017-12-19
  • 2016-11-25
  • 1970-01-01
  • 2019-09-14
  • 2018-08-30
  • 1970-01-01
相关资源
最近更新 更多