英文:
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("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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论