As much as I liked all the answers. I have decided to go another route especially after watching the the lesson https://laracasts.com/lessons/javascript-conveniences. In this video Jeff talks about some great ways to do asynchronous form requests with ajax and forms. I started implemented this into my own application and hit a road block. In the video he uses the native confim box and I decided to use my modal instead. I'm trying to figure out how to expand on my code so that when it hits the data-confirm (submit). It will show the modal with a certain message I put into the form data attributes such as the remote-title or remote-message.
As of right now what happens is after I fill out the form and click Create it shows the default text for the modal and doesn't display the changes I wanted to apply. I'm also curious to know if the way I'm handling the code is correct because it does the POST request as soon as I click create which should only be applying when I click in the modal confirm button. I was just going by the video lesson so I'm not sure where I made my mistake.
<form method="POST" action="http://backstage.app/backstage/users" accept-charset="UTF-8" data-remote="data-remote" data-title="Creating New User" data-message="Are you sure you want to create this user as it will be saved and the only way to make changes is edditing after its saved to the database?" id="basicForm"><input name="_token" type="hidden" value="AhckfFbNnBme6yCZ5qb8QHOFi9GWaK0LK16d7KOa">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Create User Form</h4>
</div><!-- panel-heading -->
<div class="panel-body">
<div class="row">
<div class="form-group ">
<label for="first_name" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input class="form-control" required="required" name="first_name" type="text" id="first_name">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="last_name" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input class="form-control" required="required" name="last_name" type="text" id="last_name">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="username" class="col-sm-3 control-label">Username</label>
<div class="col-sm-9">
<input class="form-control" required="required" name="username" type="text" id="username">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="email_address" class="col-sm-3 control-label">E-Mail Address</label>
<div class="col-sm-9">
<input class="form-control" required="required" name="email_address" type="text" id="email_address">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input class="form-control width100p" required="required" name="password" type="password" value="" id="password">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="password_confirmation" class="col-sm-3 control-label">Password Confirmation</label>
<div class="col-sm-9">
<input class="form-control width100p" required="required" name="password_confirmation" type="password" value="" id="password_confirmation">
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="role_id" class="col-sm-3 control-label">User Role</label>
<div class="col-sm-9">
<select id="role_id" class="width100p" required="required" name="role_id"><option value="default">Please Select</option><option value="1">Basic User</option><option value="2">Editor</option><option value="3">Administrator</option><option value="4">Owner</option></select>
</div>
</div><!-- form-group -->
<div class="form-group ">
<label for="status_id" class="col-sm-3 control-label">User Status</label>
<div class="col-sm-9">
<select id="status_id" class="width100p" required="required" name="status_id"><option value="default">Please Select</option><option value="1">Active</option><option value="2">Inactive</option><option value="3">Suspended</option><option value="4">Banned</option></select>
</div>
</div><!-- form-group -->
</div><!-- row -->
</div><!-- panel-body -->
<div class="panel-footer">
<div class="row">
<div class="col-sm-9 col-sm-offset-3">
<input class="btn btn-primary mr5" data-confirm="data-confirm" type="submit" value="Create">
<input class="btn btn-dark" type="reset" value="Reset">
<a href="http://backstage.app/backstage/users" class="btn btn-info">Back To Users</a>
</div>
</div>
</div><!-- panel-footer -->
</div><!-- panel --> </form>
</div><!-- col-md-6 -->
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
</div>
<div class="modal-body">
<p>This is the default text.</p>
</div>
<div class="modal-footer">
<button type="button" id="myModalCancel" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" id="myModalConfirm" class="btn btn-primary">Yes</button>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
(function () {
$('form[data-remote]').on('submit', function(e) {
var form = $(this);
var method = form.find('input[name="_method"]').val() || 'POST';
var url = form.prop('action');
$.ajax({
type: method,
url: url,
data: form.serialize(),
success: function(response) {
//var title = form.data('remote-title');
//var message = form.data('remote-message');
var className = 'growl-error';
if (response.errors == 0) {
className: 'growl-success'
}
$.gritter.add({
title: title,
text: message,
class_name: className
})
}
});
e.preventDefault();
});
$('input[data-confirm], button[data-confirm]').on('click', function(e) {
var input = $(this);
input.prop('disabled', 'disabled');
$("#myModal").modal('show', function() {
var title = form.data('remote-title');
var message = form.data('remote-message');
$('.model-header h1').html(title);
$('.model-body p').html(message);
});
input.removeAttr('disabled');
});
})();