How to make one calculated field execute the code on change of a slider value?

Resolved Damn!
(@greedymind)

6 years, 4 months ago
Hello,

Is there a way to make one calculated field execute the code on change of a slider value?

The form is set to work on click of a calculate button, the issue is, I’m setting the slider value through code when a user selects a radio button. So now lets say a user wants to set a custom value by dragging the slider and when he clicks the calculate button again, the slider resets back to the value selected in the radio buttons which defeats the very purpose of having the slider. I know it would work when the form is set to eval dynamically but I just want one calculated field to execute the code on change of the slider value while the form is set to work on click of a calculate button. How can it be done?

Tried this code, but doesn’t seem to be working:
```
<script>
jQuery(document).on('change', '.carb-slider select', function(){
var protein = (fieldname60/100)*fieldname85;
var v = prec(protein/4,0);
var color = '#666666',
f = jQuery('#carb-result');
	f.css('color',color).html(v+' g');
return v;
});
</script>
```
Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)

Plugin Author codepeople
(@codepeople)

6 years, 4 months ago
Hello @greedymind,

If you need a custom behavior, we can offer you a custom coding service.

If you have disabled the dynamic evaluation of the equations, and your form includes a calculate button, but furthermore, you want eval the equations in the onchange event of the slider control. The easier solution would be call the onclick event of the calculate button in the onchange event of the slider.

For example, if the calculated field is the fieldname1, and the slider control the fieldname2, you should insert a “HTML Content” field with the piece of code below as its content:
```
<script>
jQuery(document).on('change', '[id*="fieldname2_"]', function(){
jQuery('[id*="fieldname1_"] input').click();
});
</script>
```
and that’s all.
Best regards.
Thread Starter Damn!
(@greedymind)

6 years, 4 months ago
Hello,

Thanks for the code. I tried it and the value of the calculated field doesn’t change on change of the slider value.
```
<script>
jQuery(document).on('change', '[id*="fieldname85_"]', function(){
jQuery('[id*="fieldname93_"] input').click();
});
</script>
```
ref page: https://damnripped.com/test/

Thanks.
Plugin Author codepeople
(@codepeople)

6 years, 4 months ago
Hello @greedymind,

The webpage you sent me as reference does not includes the fields fieldname85 or fieldname93. By the way, there is an issue in the code I sent you, try with the following one:
```
<script>
jQuery(document).on('change', '[id*="fieldname85_"]', function(){
jQuery('[id*="fieldname93_"]').click();
});
</script>
```
Best regards.
Thread Starter Damn!
(@greedymind)

6 years, 4 months ago

Hello,

Still no luck. The value doesn’t change. And I do have fieldname85 and 93. Please see this screenshot: http://prntscr.com/hqxu3x

Thanks
Plugin Author codepeople
(@codepeople)

6 years, 4 months ago
Hello @greedymind,

In your form the calculate button was inserted with “CP Blocks”, so, the correct code would be:
```
<script>
jQuery(document).on('change', '[id*="fieldname85_"]', function(){
jQuery('[id*="fieldname68_"] button').click();
});
</script>
```
I’m sorry, but if you need a custom behavior in your form, you should request a custom coding service from my private website:

https://cff.dwbooster.com/customization

Best regards.
Thread Starter Damn!
(@greedymind)

6 years, 4 months ago

Hello,

Now as soon as I drag the slider it goes back to its initial place. If I am not wrong the above code tries to click the calculate button on change of slider value? instead of that, I just want to run the code inside fieldname93 every time the slider value changes.

I will surely request a custom coding service to implement charts in my forms but I gotta wait until the end of this month for that.

Thanks.

Plugin Author codepeople
(@codepeople)

6 years, 4 months ago

Hello,

You cannot run only one equation in the form, because the result of an equation can affect to other calculated fields. If you want implement some operations by yourself in the onchange event of a field, you wouldn’t use the mechanisms of the plugin. In this case, you should read the values of fields by yourself with javascript, make the mathematics operations, and assign the result to the corresponding field, and finally, call the onchange event of this field.

Best regards.

Thread Starter Damn!
(@greedymind)

6 years, 4 months ago

Damn, Seems like a lot of work. Is this achievable if I request for a custom coding?

Plugin Author codepeople
(@codepeople)

6 years, 4 months ago

Hello @greedymind,

In my opinion the issue is caused by the way you are assigned the values to the slider controls, because if you evaluate only one equation (in the onchange event of the slider) but not the other equations, then, the values of fields that depend of this equation would be wrong.

Summarizing, trigger the onlick event is the recommended solution, but you should check the way the values are assigned to the sliders.

Best regards.

Thread Starter Damn!
(@greedymind)

6 years, 4 months ago

Ok thank you. I guess that’s just out of scope. One more question, how do I make the sliders read only?

And btw, the print block does not hide the CP Blocks buttons when print button is clicked.

Plugin Author codepeople
(@codepeople)

6 years, 4 months ago

Hello,

The easiest way to convert the slider in read only, is entering the following style definition through the “Customize Form Design” attribute in the “Form Settings” tab:

.cff-slider-field * { pointer-events : none; }

If you want hide the buttons when the form is printed, you simply should hide the <button> tags with css.

Best regards.

Thread Starter Damn!
(@greedymind)

6 years, 4 months ago

Thank you very much for that.

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘How to make one calculated field execute the code on change of a slider value?’ is closed to new replies.

Tags