success message in popup div without refreshing page

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?