How to get Contact Form 7 field values in javascript?

Question

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

your question is vague, it's unclear what you are trying to achieve. Please read the question guidelines to understand how to maximise your chances of getting help. — Aurovrata
– Aurovrata, Commented Jan 6, 2020 at 12:04
I would like to have a BMI calculator and when the BMI is higher than 30 the text element should appear. Only the last part of the code doesn't work. I don't understand why. Thanks for you help! — Brian Driessen
– Brian Driessen, Commented Jan 7, 2020 at 14:36
did you try to step through your code using the debugger in the javascript console? — Aurovrata
– Aurovrata, Commented Jan 8, 2020 at 13:04

Aurovrata · Accepted Answer · 2020-01-14 11:53:17Z

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

edited Jan 14, 2020 at 11:53

answered Jan 8, 2020 at 13:39

Aurovrata

2,38032 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Driessen Over a year ago

Thanks for your time, it doesn't seem to work. This is the source code for the centimeter part:

Lengte (cm):<br> <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 wpcf7-validates-as-number" min="130" aria-required="true" aria-invalid="false"></span></label>

Aurovrata Over a year ago

I realised I made a typo in the code, I have fixed that and added a jsFiddle example which works.

Collectives™ on Stack Overflow

How to get Contact Form 7 field values in javascript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related