Disable field change trigger on submit
-
Hi! I’m using forminator form with some JS calculations on input fields (with “$(‘.field1 input’).change(function () {//my_calcs}”). I have multi page form and the problem is that each time I go to the “Next page”, all my input fields get triggered (and all corresponding calculations too), which slows down form. My assumption is that once I click “Next page”, your form calls .change() on all input fields (why?). Is it possible to disable such behavior? Please let me know, thanks a lot!
-
Hi @nicewp123,
I hope you are keeping well and thank you for reaching out to us.
Wouldn’t you mind please sharing the javascript used for calculations along with the export of the form so we take a closer look at the issue and help you further?
Please share the export of the form using pastebin.com or Google Drive.
Please find how to export a Forminator form in our documentation here: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export
We look forward to hearing back from you.
Kind Regards,
Nebu John@wpmudevsupport14, Here it is https://file.io/s0hDsl420W31
Basically, just click “Next” (page) and in console you will see that change is triggered 2 times (1 time for each Number field). So basically change() function is triggered at Submit button and I would like to disable it because fields don’t actually change and it slows down page a lot.HI @nicewp123
Thank you for response!
Unfortunately, the file that you shared is no longer available so I can’t check it. In general, Forminator forms do use JS quite extensively and it doesn’t seem to be possible to make some “general change” but we can ask our developers too look into this specific case to see if some additional code could be added (or your code modified) to avoid the issue.
Yet, we’d need to be able to check specific form and code for this. If you still need assistance then, please share it again so we could download it and request our developers to give it a look to see if and how we can help you with the issue.
Kind regards,
Adam@wpmudev-support8, ok, sorry for not working link, here are the files again https://easyupload.io/62qnt9
Hi @nicewp123
Thank you for response!
I checked provided form and code and I believe this isn’t an actual form/code in question but rather just a simple example that you created for this ticket.
We asked for the specific code and form in order to be able to test that “slowing down” issue and see if there’s anything we could suggest but with this provided one – there’s no slowing down (neither I nor my colleagues could replicate it).
It’s expected that it’s not slowing down anything because the provided form is pretty simple and the code is only listening to “change” event and writing message in console – it’s not really doing anything else.
However, you are right about the “change” event being triggered by the plugin.
It’s not “doubled” (as in your code and out code triggers it) but rather your code listens to “change” event for two fields. Since “change” happens on both fields – it’s reported twice in console. If you put 10 number fields on that same page and add all their selectors to the code – it will report ten of them.
The “change” even when switching pages is, indeed, triggered by Forminator code. Specifically: form’s JS listens to “click” (and few other) events on buttons and when it happens, it does trigger (emulate) “change” event on fields. This is necessary for things like validation, hiding/showing fields, checking if they are required and/or visibility conditions.
We can’t remove “click” even listener from buttons because that would make them not working but since that event is what results in triggering function that forces the “change” event on fields – there’s no easy way to change that without significant modifications to Forminator’s core JS code and possibly breaking some of its features.
On the other hand, the even being triggered… the event itself should not really cause slow downs of the form, even if it’s triggered for many fields. The code that is executed, the way the code hooked to that event works and what it “does with the form” – this may have a significant meaning. But in order to check that we would need to check original, real form and actual full code.
Kind regards,
Adam@wpmudev-support8, thanks for extensive reply! Yes, this code was just a demo to show that change() is triggered on submit. Well, my form does complex calculations when certain numbers change. You can imagine that if all of the fields are triggered at the same time, it causes delay as all calculations are performed. I understand that changing how forminator is too time consuming. I just thought maybe there is a way to disable validation for selected fields so they are not triggered. I’ve put these fields hidden under conditional logic (not shown unlesss manually selected with checkbox), but they still get triggered. In case that’s not possible, I guess I just have to check whether input value actually changed or just got triggered artifically (and if so, disable further calculations with “if (oldVal == newVal)”{//do nothing}). I also thought maybe there is another method to listen to my fields actual input change, so that it is not triggered when field was clicked but value remained same.
Hi @nicewp123
Thanks for response!
I got the idea now and yes – if you do have multiple fields on forms that all have some extensive JS calculations done upon “change” event, then it may indeed affect performance.
The change of that behavior right in Formintor isn’t quite about being “Time consuming” but rather about “why it does that”. I’m not a developer myself and while I could track down what and why happens, I can’t really tell exactly what would be consequences of changing the code so it would not emulate “change” event. But still – it would require changes in plugin core files and this is never a way to address issues (unless it’s done with an official update of the plugin).
The check – in your code – whether the value really changed or not would be the simplest and probably the most reasonable way to address it currently; so “on change” wouldn’t fire up calculations but check if the value really changed and only proceed with calculation if it did. That’s a good idea.
As for using some other even than “change” – that’s a fair question but I need to consult it with our developers. I have already asked them and we (I or one of my colleagues) will update you here again once we have some advice from them.
Best regards,
AdamHi @nicewp123
I just got feedback from our developers.
As I suspected, it wouldn’t be possible to change core code of the plugin to stop it triggering that event and also there’s no alternative “Forminator native” event to be used.
However, one of our developers gave it a bit more look and came up with what appears to be a workaround. If you’d like to try it, here’s the code (note: it’s a mix of PHP and JS so needs to be applied as MU plugin as described):
<?php add_action('wp_footer', 'wpmudev_update_calculation_instant', 9999); function wpmudev_update_calculation_instant(){ global $post; if ( is_a( $post, 'WP_Post' ) && !has_shortcode($post->post_content, 'forminator_form') ) { return; } ?> <script type="text/javascript"> jQuery(document).ready(function($){ setTimeout(function() { $('.forminator-custom-form').trigger('after.load.forminator'); },100); $(document).on('after.load.forminator', function(e, form_id) { if ( e.target.id == 'forminator-module-2910' ) { var typingTimer; var doneTypingInterval = 500; var $input = $('.forminator-number--field'); $input.each(function() { $(this).on('keyup', function () { clearTimeout(typingTimer); typingTimer = setTimeout(doneTyping, doneTypingInterval); }); $(this).on('keydown', function () { clearTimeout(typingTimer); }); }) function doneTyping () { $input.trigger('change'); //perform calculations here } } }); }); </script> <?php }
– first, you’d need to remove your custom code form the site
– then create an empty file with php extension (e.g. “forminator-custom-js-calculations.php”)
– copy and paste that code into it
– in this lineif ( e.target.id == 'forminator-module-2910' ) {
then number 2910 should be replaced with the number that’s an ID of you form (so the same number that you see in form shortcode)
– and this line
//perform calculations here
should be replaced with the part of your code that does your custom calculations.
– then save the file and upload it to the “/wp-content/mu-plugins” folder of your site’s WordPress installation.
Best regards,
Adam@wpmudev-support8, thank you very much for your help!
One extra question: is it possible to detect when “Next” button was clicked? Is it possible to identify on which page of multipage form I currently am?
- This reply was modified 1 year, 11 months ago by nicewp123.
Hi @nicewp123,
I hope you are doing well today!
This is the example code to get the current step. Because of this line?
console.log(step);
?you will be able to see the current step in the console.$(document).on('forminator.front.pagination.move', function(data) { var step = $('.forminator-current').attr('data-nav'); console.log(step); });
Kind regards,
Zafer
- The topic ‘Disable field change trigger on submit’ is closed to new replies.