Calculation based on number of checkboxes checked in Contact-Form-7 based on JQuery

问题

I am building a form where users should type in numbers and select options in checkboxes. At the end I want to make calculations out of the inputs and display them to the user. I found a tutorial pointing me in the right direction here. With that I was able to do a simple calculation based on an input value of a user. Now I want to do a more complex calculation based on the number of checkboxes that are checked. In my code I have the fields "number", "group1", "group2". The results should be shown under "complex math".

Here is the form code so far:

<label>
  number: 
</label>
[number sample id:no min:1 max:1000]

<label>
group1:
</label>
[checkbox group1 id:g1 "p1" "p2" "p3"]

<label>
group2:
</label>
[checkbox group2 id:g2 "t1" "t2" "t3"]

<label>
simple math: 
</label>
[text test1 id:simple]
<label>
complex math: 
</label>
[text test2 id:complex]


<script>
jQuery(document).ready(function(){
var no;
var g1;
var g2;
var simple;
var complex;
jQuery("#no").on("change", function() {
 no= this.value ;
 simple=no*10;
 jQuery("#simple").val(simple.toFixed()); 
});
});
</script>

What I like to achieve is a calculation like complex-math=(number*group1*30)+(number*group2*100).

So for number=2 ,g1=2xchecked,g2=2xchecked the results should be 520.

Any ideas on how to achieve that? It does not need to be necessarily responsive. To start the calculation on a button click would be ok,too.

回答1:

I would write your function as such, and I'll break it down before the snippet code:

var calc = function() {
  var no = $('#no').val();
  var g1 = $('input[name="g1"]:checked').val();
  var g2 = $('input[name="g2"]:checked').val();

  var simple = no * 10;
  $('#simple').val(simple.toFixed());

  var complex = (no * g1 * 30) + (no * g2 * 100);
  $('#complex').val(complex.toFixed());
}

$('#no, input[name="g1"], input[name="g2"]').on('change', function() {
  calc();
});

I don't think there's a need to store the actual values outside of the calculation unless you need it. Since there's no submit button it didn't make sense to only update the calculated values on number change but on any of the input changes. A single calculation function that executes whenever the user changes the input makes more sense. Then it's just about getting the individual values to use in calculation. Because of the complex formula I assumed the groups are actually supposed to be radio buttons.

var calc = function() {
  var no = $('#no').val();
  var g1 = $('input[name="g1"]:checked').val();
  var g2 = $('input[name="g2"]:checked').val();
  
  var simple = no * 10;
  $('#simple').val(simple.toFixed());

  var complex = (no * g1 * 30) + (no * g2 * 100);
  $('#complex').val(complex.toFixed());
}

$('#no, input[name="g1"], input[name="g2"]').on('change', function() {
  calc();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>number:</label>
<input id="no" type="number" min="1" max="1000" />

<br />

<span>group1:</span>
<label><input name="g1" type="radio" value="1" checked />p1</label>
<label><input name="g1" type="radio" value="2" />p2</label>
<label><input name="g1" type="radio" value="3" />p3</label>

<br />
<span>group2:</span>
<label><input name="g2" type="radio" value="1" checked />t1</label>
<label><input name="g2" type="radio" value="2" />t3</label>
<label><input name="g2" type="radio" value="3" />t3</label>

<br />

<label>simple math: </label>
<input id="simple" type="text" />

<br />

<label>complex math: </label>
<input id="complex" type="text" />

来源：https://stackoverflow.com/questions/55382273/calculation-based-on-number-of-checkboxes-checked-in-contact-form-7-based-on-jqu

标签

jquery

wordpress

contact-form-7