php ajax form submit without refresh parent page

Question

i have some issues for ajax form submit

$("#send").on("click", function() {

$.ajax({
            type: "POST",
            url: "ads_process.php",
            data: $("#ads").serialize(),
            success: function(){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });

a page have list of data there is button for comment, when it click a popup window open. i write comment and submit but the problem is that a parent page is refresh i dont want refresh a parent page only i want submit the data, insert in database and popup window will be closed and data will be shown on parent page.

can any body help me

=====================================================================================

Nothing Happen I Post my Complete Code::

HTML FILE ::

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="javascript" type="text/javascript" src="../js/jQuery_1-9-0.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>

<a href="" class="topopup">popup</a>

<script language="javascript" type="text/javascript">
    $("#send").on("click", function() {

        events.preventDefault();
        $.ajax({
        type: "POST",
        url: "ads_process.php",
        data: $("#ads").serialize(),
        success: function(data){
            if(data == "true") {
                $("#ads").fadeOut("fast", function(){
                    //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                    setTimeout("$.ads.close()", 2000);
                    });
                }
            }
        });
    });
</script>

<div id="toPopup"> 

    <div class="close"></div>
    <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
    <div id="popup_content"> <!--your content start-->
    <form action="" method="post" id="ads">

    <div class="formMainDiv">

        <div class="formDiv">

            <div class="lableHeading">
                Agent Name:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAgentName" id="txtAgentName" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Ad ID:
            </div>
            <div class="inputDiv">
                <input type="text" name="txtAdsId" id="txtAdsId" class="inputFeild" />
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Comments:
            </div>
            <div class="inputDiv">
                <textarea name="txtComments" id="txtComments" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Reason:
            </div>
            <div class="inputDiv">
                <input type="radio" name="rdReason" id="rdReason" value="Not Responding at the moment" />
                <label class="lableText">
                    Not Responding at the moment&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Busy" />
                <label class="lableText">
                    Busy&nbsp;&nbsp;
                </label>
                <input type="radio" name="rdReason" id="rdReason" value="Call back" />
                <label class="lableText">
                    Call back&nbsp;&nbsp;
                </label>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Other Resaons:
            </div>
            <div class="inputDiv">
                <textarea name="txtOtherReason" id="txtOtherReason" class="inputText"></textarea>
            </div>

        </div>

        <div class="formDiv">

            <div class="lableHeading">
                Call Status:
            </div>
            <div class="inputDiv">
                <img src="/images/icon/green.png" />
                    <input name="rdFoneStatus" type="radio" value="1">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/red.png" />
                    <input name="rdFoneStatus" type="radio" value="2">&nbsp;&nbsp;&nbsp;
                <img src="/images/icon/gray.png" />
                    <input name="rdFoneStatus" type="radio" value="3">
            </div>

        </div>

        <div style="float:right; margin:18px 0 0">
            <button id="send" class="button">Submit</button>
        </div>

    </div>

    </form>
    </div> <!--your content end-->

</div> <!--toPopup end-->

<div class="loader"></div>
<div id="backgroundPopup"></div>

JS File::

/* 
    author: istockphp.com
*/
jQuery(function($) {

    $("a.topopup").click(function() {
            loading(); // loading
            setTimeout(function(){ // then show popup, deley in .5 second
                loadPopup(); // function show popup 
            }, 500); // .5 second
    return false;
    });

    /* event for close the popup */
    $("div.close").hover(
                    function() {
                        $('span.ecs_tooltip').show();
                    },
                    function () {
                        $('span.ecs_tooltip').hide();
                    }
                );

    $("div.close").click(function() {
        disablePopup();  // function close pop up
    });

    $(this).keyup(function(event) {
        if (event.which == 27) { // 27 is 'Ecs' in the keyboard
            disablePopup();  // function close pop up
        }   
    });

    $("div#backgroundPopup").click(function() {
        disablePopup();  // function close pop up
    });

    $('a.livebox').click(function() {
        alert('Hello World!');
    return false;
    });


     /************** start: functions. **************/
    function loading() {
        $("div.loader").show();  
    }
    function closeloading() {
        $("div.loader").fadeOut('normal');  
    }

    var popupStatus = 0; // set value

    function loadPopup() { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { // if value is 1, close popup
            $("#toPopup").fadeOut("normal");  
            $("#backgroundPopup").fadeOut("normal");  
            popupStatus = 0;  // and set value to 0
        }
    }
    /************** end: functions. **************/
}); // jQuery End

Answer 1

First let me say this:
You're binding an event listener, but the DOM is probably not ready, yet: wrap your code in a $(document).ready(function(){}); callback
Then: setTimeout("$.ads.close()", 2000); is bad practice. setTimeout should be passed a reference to a function object, not a string, replace it with:

setTimeout(function()
{
    $.ads.close();
}, 2000);

Next
You, indeed, neet to preventDefault the event, to prevent its default behaviour to get executed. Though this doesn't prevent the event from propagating/bubbling through the dom. If the clicked element is a submit button, the form might still get submitted (and the page will be refreshed).
To stop this from happening, either call both preventDefault() and stopPropagation(), or (since you're using jQuery), you can simply return false, which does the same thing as calling both methods.

In your case, though, I'd attach the event handler to the form, and listen for the submit event:

$(document).ready(function()
{
    $('#form').on('submit', function(e)
    {
        $.ajax({
            type: 'post',
            url: 'your/url',
            data: $(this),
            success: function(data)
            {//do stuff
                console.log(data);
            }
        });
        return false;
        //or
        e.preventDefault();
        e.stopPropagation();//strictly speaking, not required here
    });
});

That should disable the form being submitted when the client uses a keystroke (like enter) to submit the form, too.

Foot-note: the language attribute of the script tag has been deprecated since 1999, just type will do

Answer 2

By using prevent default you can stop the form refreshing the page like so: http://api.jquery.com/event.preventDefault/

$("#send").on("click", function(events) {
    events.preventDefault();
    $.ajax({
                type: "POST",
                url: "ads_process.php",
                data: $("#ads").serialize(),
                success: function(){
                    if(data == "true") {
                        $("#ads").fadeOut("fast", function(){
                            //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                            setTimeout("$.ads.close()", 2000);
                            });
                        }
                    }
                });
            });

Answer 3

Try this code

$("#send").on("click", function(e) {
e.preventDefault();
$.ajax({
            type: "POST",
            url: "ads_process.php",
            //Specify the datatype of response if necessary
            data: $("#ads").serialize(),
            success: function(data){
                if(data == "true") {
                    $("#ads").fadeOut("fast", function(){
                        //$(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                        setTimeout("$.ads.close()", 2000);
                        });
                    }
                }
            });
        });