hook into submit (client side) before execution

Resolved

(@pche32)

we used to modify submit form in javascript / jQuery during submit to enhance it with “custom” input html tag with some calculated values using javascript and wp_enqueue_script to transfer it to server side (php)

but after upgrade to 5.4 (and newer) it doesn’t work anymore

wp_enqueue_script(‘custom-script’, plugin_dir_url(__FILE__) .
‘/custom-script.js?fer=222’, array(‘jquery’), “2”);

(function ($) {
    $(function () {
        $("form").each(function () {
            var form = $(this);
            if ($(this).find("input[name=custom]").size() > 0) {
                $(this).submit(function (e) {
                    var arr = [];
                    $(this).find("input[name=custom]").each(function () {
                        arr.push({
                            email: $(this).val(),
                            price: $(this).closest("table").find(".cf7-calculation").val()
                        });
                    });
                    console.log(arr);
                    if (form.find("[custom-input-field]").size() == 0) {
                        form.append("<input type='text' name='custom-input-field'/>");
                    }
                    form.find("[name=custom-input-field]").val(JSON.stringify(arr));
                    return true;
                });
            }
        });
    });
})(jQuery)

now it looks javascript is executed after submit…

what is current preferred way to inject into submit action before it is executed on client side

thank you

This topic was modified 4 years, 10 months ago by pche32.

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

Erik
(@codekraft)

4 years, 10 months ago

@pche32,

you can try in this way

it appends the fields exactly on submit. let me know if has worked.
Thread Starter pche32
(@pche32)

4 years, 10 months ago
Hi Erik,

thank you very much for pointing me to the right direction,
if you don’t mind i would like to ask you additional/related question:

since i prefer not to modify plugin’s script.js itself what is ideal place to hook my js (script in dedicated file) itself ?

and so if i understand it correctly, final code should look like this:
```
const formElem = $(wpcf7Form)[0].querySelector('form');
let formData = new FormData(formElem.formData);

formElem.addEventListener('formdata', (e) => {
    e.formData.append('custom-input-field', JSON.stringify(arr));
    formData = e.formData;
});
```
thank you very much for your support and patience
Erik
(@codekraft)

4 years, 10 months ago

hi @pche32

yes the code looks fine, let me know if works as intended!

you should not modify scripts of a plugin which is not your own, the right place can be your theme main script file (like scripts.js).
Thread Starter pche32
(@pche32)

4 years, 10 months ago
Erik you are GOLDEN!
thank you very much,

since i fixed what you directed me to, it wasn’t even necessary change the way i registered javascript (so i left it using: wp_enqueue_script)

i’m posting code if anyone would be looking for something similar:
```
const wpcf7Forms = document.querySelectorAll('.wpcf7');
if (wpcf7Forms.length) {
  for (const wpcf7Form of wpcf7Forms) {
            
    const formElem = $(wpcf7Form)[0].querySelector('form');
    let formData = new FormData(formElem.formData);

    function getArr() {
      //your logic here
      return arr;
    }

    formElem.addEventListener('formdata', (e) => {
      var arr = [];
      arr = getArr();
      e.formData.append('custom-input', JSON.stringify(arr));
      formData = e.formData;
    });

  }
}
```
- This reply was modified 4 years, 10 months ago by pche32.

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

The topic ‘hook into submit (client side) before execution’ is closed to new replies.

Tags