1

I'm creating a widget, and cannot figure out how to get an event right before the person clicks "save" or presses the enter button on the widget admin panel. What would be the javascript code to get the event on the widget admins' form submit?

Example: enter image description here

Thanks!

  • Try using mousedown event on the submit button. – Sisir Aug 18 '15 at 6:16
  • Thanks Sisir, but that is not an acceptable answer because the user can press "ENTER" in the form, and that will submit the widget "form" without calling my event. Sorry - I should have explained this in the question. – GavinR Aug 18 '15 at 13:13
  • Is it absolutely vital to intercept things before the ajax save and not directly after (you say "right before the person clicks save" but I assume we're ruling out time travel)? WordPress 3.9 did introduce a supported jQuery event: widget-updated make.wordpress.org/core/2014/04/17/… – Phil Lewis Aug 22 '15 at 7:10
5
+50

You need to listen for the click event (there is no such thing as a pre/before click) and do some work right then or figure out if you want to allow the click to "go through" or not based on some validation for example.

jQuery(function($) {
    // We are binding to the body so that the code
    // will work for future elements added to the DOM
    $('body').on('click', '.widget-control-save', function(ev) {
        var my_validation = true;

        if ( my_validation ) {
            console.log('widget save!');
        } else {
            ev.preventDefault();
            ev.stopPropagation(); /* We are capturing the event so it won't bubble up. */
        }
    })
});
  • Thanks @webtoure, I thought about using the click event, but that creates a bug in the form that the person can click the "ENTER" key while in the form, which submits the form, but does not (I assume - I have not tested this) trigger the "click" event. Does that make sense? – GavinR Aug 18 '15 at 13:09
  • @GavinR This is really basic JavaScript but I forgot to add the stopPropagation method. – webtoure Aug 18 '15 at 13:31
  • webtoure did you see my comment (above)? – GavinR Aug 18 '15 at 17:42
  • @GavinR Yes and I wasn't able to reproduce the issue you've mentioned no matter what. I did thoroughly test my snippet though while making sure it was loaded as late as possible (the call stack and all that) and it worked perfectly. Also, there is no form submission, everything is done from Ajax binding to the click event on the 'Save' button. Pressing the Enter key on the keyboard, while only being in a text field and not in a textarea triggers a Click event for an input of type submit. – webtoure Aug 18 '15 at 17:52
  • @GavinR This is really basic HTML behaviour (pressing Enter while in a text input field triggers the submit Click / form submisison). WordPress captures this call and handles the data through Ajax. In my snippet I call stopPropagation precisely to not let WordPress's JavaScript to further be notified about this event. – webtoure Aug 18 '15 at 18:01
1

See the WordPress Codex page on Widgets API and utilize the update() function in your widget class declaration as used here and add a script call in the appropriate place:

/**
 * Processing widget options on save
 *
 * @param array $new_instance The new options
 * @param array $old_instance The previous options
 */
public function update( $new_instance, $old_instance ) {
    // processes widget options to be saved
?>
    <script type="javascript">
        /*Your function here*/
    </script>
<?php
    // be sure to include normal save functions as defined by Codex / source code
}
  • Hi feelinferrety, thanks for the answer, but I need the javascript (jquery) side event, because I need to do something in JS before the form is submitted. – GavinR Aug 18 '15 at 2:37
  • Add <script> tag inside the PHP function for whatever you need to run. This is the hook provided by WP for modifying the save process. I've edited my answer to reflect that and make it more clear. – feelinferrety Aug 18 '15 at 19:01
  • Upvoting because if you want to do anything in PHP, this is the correct answer. – Phil Lewis Aug 22 '15 at 7:12
0

1) If you want to perform certain operation as a first activity after the save button click, then you would have achieved it via server side script (here PHP) by hooking into some action, but as you are clearly specifying that you want client side action only, I think there is no straightforward way to control the order of the even like click. However, one following can be done -

If you have to perform more than one JavaScript operations, then you can put your functions in the order accordingly. e.g. on click, func1() should execute first and then func2(), so just call these in that order.

2) If you have to perform only one JavaScript operation, then it will anyway be executed and then server side code will execute on submit. OR if this approach doesn't completely execute your JS function first, then you can use preventDefault() to let your JS function execute first and then automatically submit the form using JavaScript function only e.g. .submit() is available in jQuery

3) Apart from these, I have one more way which I'm not completely sure but may help you - Can you use onfocus event instead? This will execute before click and will work with mouse as well as keyboard. But, a disadvantage is that it will always execute your script irrespective of whether the user actually submitted the form or not.

4) WordPress widget saves the widget form via ajax, so you can check if there is any hook available where you can inject your script and get your script executed before the form entry is actually made in database.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.