Title: hook into submit (client side) before execution
Last modified: June 20, 2021

---

# hook into submit (client side) before execution

 *  Resolved [pche32](https://wordpress.org/support/users/pche32/)
 * (@pche32)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/)
 * 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, 11 months ago by [pche32](https://wordpress.org/support/users/pche32/).

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

 *  [Erik](https://wordpress.org/support/users/codekraft/)
 * (@codekraft)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/#post-14576152)
 * [@pche32](https://wordpress.org/support/users/pche32/),
 * you can try in [this way](https://github.com/erikyo/cf7-antispam/blob/d9777f4d8e00f2eba9750f0637f801aa5d15db1c/includes/src/script.js#L70)
 * it appends the fields exactly on submit. let me know if has worked.
 *  Thread Starter [pche32](https://wordpress.org/support/users/pche32/)
 * (@pche32)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/#post-14577534)
 * 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](https://wordpress.org/support/users/codekraft/)
 * (@codekraft)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/#post-14578204)
 * hi [@pche32](https://wordpress.org/support/users/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](https://wordpress.org/support/users/pche32/)
 * (@pche32)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/#post-14578885)
 * 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](https://wordpress.org/support/users/pche32/).

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

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

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [events](https://wordpress.org/support/topic-tag/events/)

 * 4 replies
 * 2 participants
 * Last reply from: [pche32](https://wordpress.org/support/users/pche32/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/hook-into-submit-client-side-before-execution/#post-14578885)
 * Status: resolved