Widget Admin - Form Submit Event?

Question

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:

Thanks!

Answer 1

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. */
        }
    })
});

Answer 2

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
}

Answer 3

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.