Php ajax form submit without updating the parent page

Question

I have some problems for ajax submit form

$("#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); }); } } }); }); 

there is a list of data on the page, there is a button for comments when it opens a pop-up window. I am writing a comment and posting, but the problem is that the parent page is being updated, I do not want to update the parent page, I only want to send data, paste it into the database and the popup will be closed and the data will be shown on the parent page.

can anyone help me

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

Nothing happened. I submit my full 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

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); }); } } }); }); 

Answer 2

Using the default prevent function, you can stop the form refreshing the page as follows: 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

First let me say the following:
You are attaching an event listener, but the DOM is probably not ready yet: wrap your code in a callback to $(document).ready(function(){});
Then: setTimeout("$.ads.close()", 2000); - bad practice. setTimeout should pass a reference to the object of the function, and not to the string, replace it with:

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

Further
You really neet for the preventDefault event to prevent its default behavior from being executed. Although this does not prevent the event / bubble from spreading through the house. If you click the item is a submit button, the form can be submitted (and the page will be refreshed).
To stop this, call both preventDefault() and stopPropagation() , or (since you are using jQuery), you can simply return false , which does the same thing as calling both methods.

In your case, however, I would 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 }); }); 

This should disable the form being submitted when the client uses a keystroke (such as enter) to submit the form.

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