success message in popup div without refreshing page - php

Question

I want to display text message for success in popup div without refreshing the page
My popup form like this
<div class="modal-content">
<div id="message">Your message has been sent.<br /><br /></div>
<form action="<?php echo $_SERVER['REQUEST_URI'];?>" id="CallBackForm" name="CallBackForm" method="post">
<div class="form-group">
<input id="custmobileNo" name="custmobileNo" type="text" required="required">
<input type="submit" value="call" id="callback" name="callback" class="btn btn-info">
</div>
</form>
</div>
When I click on this link pop up will call
<a href="#" data-toggle="modal" data-target="#call-back">
<input type="submit" value="Call" class="btn-d btn-doctor" >
</a>
CSS:
<style type="text/css">
#message {
display:none;
font-size:15px;
font-weight:bold;
color:#333333;
}
</style>
Ajax Call:
<script>
$("#callback").click(function () {
var custmobileNo = $("#custmobileNo").val();
$.ajax({
url: "<?php echo base_url('Call'); ?>",
type: 'post',
data: {custmobileNo: custmobileNo},
beforeSend: function () {
if (custmobileNo != "") {
$("#message").fadeIn(); //show confirmation message
$("#CallBackForm")[0].reset(); //reset fields
}
}
});
});
</script>
I wrote beforeSend function() with some data either it was standard code or not I don't know. It was calling message fine but it was not closing I want it will close with in some seconds and click on again that button success message validation was showing I want clear that text also.

Answer 1

Try something like this maybe :
$.ajax({
url: "<?php echo base_url('Call'); ?>",
type: 'post',
data: {custmobileNo: custmobileNo},
beforeSend: function () {
if (custmobileNo != "") {
$("#message").fadeIn(); //show confirmation message
$("#CallBackForm")[0].reset(); //reset fields
}
},
success: function() {
setTimeout(function() { //hide message after a certain time
$("#message").fadeout();
}, 5000); // choose after how many time message should hide, here 5s
}
});
But if your Ajax call fail you won't go in the success part so becareful !
You can do the same with complete : function() {...} instead of success : function() {...}, here is some information about Ajax event : https://api.jquery.com/Ajax_Events/
Is it what you are looking for?