Opeyemi AbdulRasheed
asked on
How to Make Modal Stay Open
Hello Experts,
How can I make my modal stay open even after clicking on submit button?
Apart from the above, I want the success_msg and error_msg to display on the modal as in attached. If there's error, I want all the inputs to still retain their values but if there's no error, data should be inserted, table refreshed and success_msg displayed while all inputs are cleared. In any case, modal remains open until I manually close it.
My modal is as follows:
And the code:
Thank you for your help.
How can I make my modal stay open even after clicking on submit button?
Apart from the above, I want the success_msg and error_msg to display on the modal as in attached. If there's error, I want all the inputs to still retain their values but if there's no error, data should be inserted, table refreshed and success_msg displayed while all inputs are cleared. In any case, modal remains open until I manually close it.
My modal is as follows:
<!-- new staff modal-->
<div class="modal fade" role="dialog" id="UpdateStaff">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Add New Staff</h4>
</div>
<form class="form-horizontal" method="post" id="newStaff-Form" action="">
<div class="modal-body">
<div class="center"><?php echo $success_msg; ?></div>
<div class="center"><?php echo $error_msg; ?></div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="initials">Initials<span style=color:red;> *</span>
</label>
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<input type="text" name="initials" class="col-xs-12 col-sm-9" id="initials" placeholder="e.g. AbdulRasheed G. O." autofocus autocomplete="off">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="user_name">Username<span style=color:red;> *</span>
</label>
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<input type="text" name="user_name" class="col-xs-12 col-sm-9" id="user_name" placeholder="Username" autocomplete="off">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">Password<span style=color:red;> *</span>
</label>
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<input type="text" name="password" class="col-xs-12 col-sm-9" id="password" placeholder="Password" autocomplete="off">
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="role">Role<span style=color:red;> *</span>
</label>
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<select name="role" id="role" class="col-xs-12 col-sm-9">
<option value="">Select Role...</option>
<option value="Admin">Admin</option>
<option value="Form Master">Form Master</option>
<option value="Subject Teacher">Subject Teacher</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="class_assigned">Class Assigned</label>
<div class="col-xs-12 col-sm-9">
<select name="class_assigned" class="col-xs-12 col-sm-9" id="class_assigned">
<?php echo fill_class_box($conn); ?>
</select>
</div>
</div>
<div class="clearfix"></div>
<div class="col-xs-12 col-sm-12">
<table class="table table-bordered" id="staff_table">
<thead>
<tr>
<th>Subject Taught</th>
<th>Class Taught</th>
<th>
<button type="button" name="add" class="btn btn-success btn-sm add" data-rel="tooltip" title="Add Blank Row"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<td>
<select name="subject_taught[]" class="form-control subject_taught"><option value="N/A">N/A</option><?php echo fill_subject_box($conn); ?>
</select>
</td>
<td>
<select name="class_taught[]" class="form-control class_taught"><?php echo fill_class_box($conn); ?>
</select>
</td>
<td>
<button type="button" name="remove" class="btn btn-danger btn-sm remove" disabled><span class="glyphicon glyphicon-trash"></span></button>
</td>
</table>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="add_staff">
<span class="glyphicon glyphicon-plus"></span> Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span> Cancel</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->And the code:
<?php
if(isset($_POST["add_staff"]))
{
$fullname = $_POST["initials"];
$username = $_POST["user_name"];
$password = $_POST["password"];
$role = $_POST["role"];
$class_assigned = $_POST["class_assigned"];
$subject_taught = implode(",", $_POST["subject_taught"]);
$class_taught = implode(",", $_POST["class_taught"]);
$query = '';
$stmt = $conn->prepare("SELECT username FROM tbl_users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$staffList = $stmt->get_result();
if (mysqli_num_rows($staffList) > 0){
$error_msg = '<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<h4><i class="ace-icon fa fa-exclamation-triangle"> Warning</i></h4>
<p>Username already used. Try another one!</p>
</div>';
}
else {
$query = "INSERT INTO tbl_users(fullname, username, password, role, class_assigned, subject_taught, class_taught) VALUES(?, ?, ?, ?, ?, ?, ? )";
$stmt = $conn->prepare($query);
$stmt->bind_param("sssssss", $fullname, $username, $password, $role, $class_assigned, $subject_taught, $class_taught);
$result = $stmt->execute();
if ($result) {
$success_msg = '<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<h4><i class="ace-icon fa fa-check"> Success</i></h4>
<p>Staff Information was successfully <span class="label label-warning">saved.</span></p></div>';
} else {
$error_msg = '<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">
<i class="ace-icon fa fa-times"></i>
</button>
<h4><i class="ace-icon fa fa-exclamation-triangle"> Error</i></h4>
<p>'.$conn->error.'</p></div>';
}
}
}
?>Thank you for your help.
ASKER
@Chris,
I tried it but nothing happened. No insert, no error, no nothing.
I tried it but nothing happened. No insert, no error, no nothing.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Million thanks. That did it.
However, I still have issue with validation where inputs are empty. Don't know how to manually validate with Ajax.
However, I still have issue with validation where inputs are empty. Don't know how to manually validate with Ajax.
For validation, you would validate the POST data in your server script. If validation failed, you could simply send back an error message and display that to the user. Here's a really simple example:
if ( ! empty($_POST) )
{
if ( empty( $_POST["initials"] ) || empty( $_POST["user_name"] ) || empty( $_POST["password"] ) || empty( $_POST["role"] ) ) {
die("You must fill in all details");
}
// Validation passed to let's deal with the DB stuff
$query = '';
...ASKER
That was awesome! Thanks sir. You're always the best.
My next challenge will be posted soon.
My next challenge will be posted soon.
For this you would need to make an AJAX request to your server to process the form. This will effectively submit your form in the background, without ever leaving the page you're on. Take a look at the following quick example and come back to me if you have any questions:
Open in new window
Basically, the jQuery code will make an AJAX request to a file called data.php when you click on the Submit button. It will send your form data as a POST array to that script, and then put the response of that script into the <div id='response'></div> element.You would need to change your PHP code slightly so that it outputs the response, so something like this at the end:
Open in new window