Laravel Form Manipulator | Multiple submit buttons in one form, each with their own action, target, method and confirmation.

laravel-form-manipulator.js

/* Larvel Form Manipulator
 *  Enables Multiple submit buttons in one form, and manipulates form-action, form-method and crud-method.

 *  Usage:
 *  <input type="submit" value="Submit to alternative action" data-submit-action="/new-target">
 *  <input type="submit" value="Submit to alternative target" data-submit-target="_blank">
 *  <input type="submit" value="Submit as delete" data-submit-method="delete">
 *  <input type="submit" value="Submit with confirmation" data-submit-confirmation="Are you sure?">

 *  Of course it works with laravelcollective forms as well:
 *  Form::submit('Submit alternative', [ 'data-submit-action' => '/new-target',
 *                                       'data-submit-target' => '_blank',
 *                                       'data-submit-method' => 'delete',
 *                                       'data-submit-confirmation => 'Are you sure?' ])

 *  2018 Kohler Dominik https://github.com/kohlerdominik
 */

(function() {

    var formManipulator = {

        // init function
        initialize: function() {
            // get all submit buttons
            this.submitButtons = $(':submit');
            // handle this method on click
            this.submitButtons.on('click', this.handleMethod);
        },


        // on click on a submit button, do this:
        handleMethod: function(e) {
            var button = $(this);
            var form = button.parents('form:first');

            if ( !formManipulator.verifyConfirm(button) ) {
                return false;
            }

            formManipulator.setAction(button, form);
            formManipulator.setTarget(button, form);
            formManipulator.setMethod(button, form);
        },


        // verify the confirmation
        verifyConfirm: function(button) {

            // return true if empty
            if (!button.data('submit-confirmation')) {
                return true;
            }

            return confirm(button.data('submit-confirmation'));
        },


        // set the new action
        setAction: function(button, form) {

            // check if empty
            if (!button.data('submit-action')) {
                    return;
            }

            $(form).attr('action', button.data('submit-action'));
        },


        // set the new target
        setTarget: function(button, form) {

            // check if empty
            if (!button.data('submit-target')) {
                return;
            }

            $(form).attr('target', button.data('submit-target'));
        },


        // set the new method (and adds a method field, if id doesn't exist so far
        setMethod: function(button, form) {
            var methodField = $(form).children('[name="_method"]');

            // check if empty
            if (!button.data('submit-method')) {
                return;
            }

            // depending on the new method, we need to set the form method as well as the MethodField
            switch ( button.data('submit-method').toUpperCase() ) {
                case "GET":
                    newFormMethod = "GET";
                    newHiddenMethod = "GET";
                    break;
                case "POST":
                    newFormMethod = "POST";
                    newHiddenMethod = "POST";
                    break;
                case "PUT":
                    newFormMethod = "POST";
                    newHiddenMethod = "PUT";
                    break;
                case "PATCH":
                    newFormMethod = "POST";
                    newHiddenMethod = "PATCH";
                    break;
                case "DELETE":
                    newFormMethod = "POST";
                    newHiddenMethod = "DELETE";
                    break;
                default:
                    return;
            }

            // add laravels method field (hidden input)
            if (methodField.length < 1) {
                $('<input type="hidden" name="_method">').appendTo(form);
            }

            $(form).attr('method', newFormMethod);
            $(form).children('[name="_method"]').attr('value', newHiddenMethod);
        }

    };


    formManipulator.initialize();
})();

Hint: if you need the data in a new window, for example a preview window (like in my case), you can do it like this:

<input type="submit" value="Submit new window" 
    data-submit-action="/new-target" 
    data-submit-target="preview_window" 
    onclick="window.open('about:blank','preview_window','width=1000,height=800');" >