Calculators on the same page interfering the results

  • Resolved nitroblood

    (@nitroblood)


    5 years, 9 months ago

    Hi, I’m using two similar calculators on the same page separated by css tabs. However, the calculators are interfering the results of each other. I’m using HTML content to show the calculated field result and this is the script for the first calculator:

    <span class="metric"></span>
<script>
jQuery(document).on('change', '[class*="fieldname8_"] input', function(){
var metric = jQuery('[class*="fieldname8_"] label').text();
if(this.value>0){
var metric += ' '+'<b>'+this.value+'</b>';
jQuery('.metric').html(metric);}
});
</script>

    The “metric” is replaced with “us” for the second calculator.
    Please advise what should I do to make the two calculators’ field names independent of each other?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @nitroblood

    Evidently if you are using the same class names, the code you are referring will interfere with the other. The alternative: you should pass a “class” attribute with an unique class name, through the form’s shortcode (every form with its own class attribute). For example:

    [CP_CALCULATED_FIELDS id="1" class="first-form"]

    and then, edit your code as follows:

    
<span class="metric"></span>
<script>
jQuery(document).on('change', '.first-form [class*="fieldname8_"] input', function(){
var metric = jQuery('.first-form [class*="fieldname8_"] label').text();
if(this.value>0){
var metric += ' '+'<b>'+this.value+'</b>';
jQuery('.first-form .metric').html(metric);}
});
</script>

    as you can see, I’m using the class name passed as parameter in the shortcode as part of the selectors in the code.

    Best regards.

    Thread Starter nitroblood

    (@nitroblood)

    This works perfectly! Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Calculators on the same page interfering the results’ is closed to new replies.