asked on

Binding the submit event of the Modal form to the AJAX call

I really don't know how to bind Modal submit button to the Ajax call.

I'm currently using the following script within the same html page:
deleteStaff.php

// sql to delete a staff
if(isset($_POST['delete'])){
	$delete_id = $_POST['user_id'];
		$sql = "DELETE FROM Users WHERE UserId='$delete_id' ";
			if ($conn->query($sql) === TRUE) {
	$success_msg = '<div class="alert alert-success">
		<span class="badge badge-success">Success </span> The Staff was successfully <div class="label label-warning">deleted</div>.
		</div>';
	} else {
	$error_msg = '<div class="alert alert-danger">
		<span class="badge badge-danger">Error: </span> '.$conn->error.' </div>';
	}
}

Open in new window

Modal form:

<!--Delete Staff Modal Alert -->
<div id="deleteModal" class="modal fade" role="dialog">
	<form method="post">
		<div class="modal-dialog">
			<!-- Modal content-->
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close red" data-dismiss="modal">&times;</button>
					<h5 class="modal-title blue bigger"><i class='ace-icon fa fa-exclamation-triangle red'></i> Delete</h5>
				</div>
				<div class="modal-body">
					<input type="hidden" name="user_id" value="">
					<div class="alert alert-danger">You're about to delete <strong id="userInitials"></strong> from database.
						All records related to this Staff will be DELETED PERMANENTLY.
					</div>
					<p class="bigger-110 bolder center grey">
						<i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>
						Are you sure you want to continue?
					</p>
				</div>
				<div class="modal-footer">
					<button type="submit" name="delete" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> Delete</button>
					<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</form>
</div><!-- /.modal -->

Open in new window

jQuery:

$('#dynamicTable').on('click', '.deleteUser', function(e) {
		    e.preventDefault();
		    $('input[name=user_id]').val( $(this).data('id') );
		    $('#userInitials').text( $(this).data('initials') );
		    $('#deleteModal').modal('show');
		});

Open in new window

Thanks for your help.

Julian Hansen

This is the basic principle

<script>
$(function() {
  $('#deleteModal form').submit(function(e) {
    e.preventDefault();

    if (e.originalEvent.explicitOriginalTarget.name == 'delete') {
      data = $(this).serialize();
      $.ajax({
        url: 'yoururlhere',
        data: data,
        type: 'post'
      }).then(function(resp) {
        $('#deleteModal').modal('hide');
      });
    }
  });
});
</script>

Open in new window

You can see it working here

Opeyemi AbdulRasheed

ASKER

@Julian,
Thanks for the response.

delete_staff.php:

<?php

include('../includes/connection.php');
// sql to delete a staff
if(isset($_POST['delete'])){
	$delete_id = $_POST['user_id'];
		$sql = "DELETE FROM Users WHERE UserId='$delete_id' ";
			if ($conn->query($sql) === TRUE) {
	$success_msg = '<div class="alert alert-success">
		<span class="badge badge-success">Success </span> The Staff was <div class="label label-warning">deleted</div> successfully.
		</div>';
	} else {
	$error_msg = '<div class="alert alert-danger">
		<span class="badge badge-danger">Error: </span> '.$conn->error.' </div>';
	}
}

?>

Open in new window

So, this is my url part:

url: 'delete_staff.php',

Open in new window

Nothing happens when I click the Delete button on modal form.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Opeyemi AbdulRasheed

ASKER

Perfect as usual. Perfectly consistent. Thank you sir.