Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Laravel Form Manipulator | Multiple submit buttons in one form, each with their own action, target, method and confirmation.
/* 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();
})();
@kohlerdominik

This comment has been minimized.

Copy link
Owner Author

@kohlerdominik kohlerdominik commented Jan 22, 2018

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');" >
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.