title: php ajax form submit without refresh parent page
body: <p>i have some issues for ajax form submit</p>
  
  <pre><code>$("#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("&lt;p&gt;&lt;strong&gt;Success! Your message has been sent, thanks!&lt;/strong&gt;&lt;/p&gt;");
                          setTimeout("$.ads.close()", 2000);
                          });
                      }
                  }
              });
          });
  </code></pre>
  
  <p>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.</p>
  
  <p>can any body help me</p>
  
  <p>=====================================================================================</p>
  
  <p>Nothing Happen I Post my Complete Code::</p>
  
  <p>HTML FILE ::</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
  
  &lt;script language="javascript" type="text/javascript" src="../js/jQuery_1-9-0.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;a href="" class="topopup"&gt;popup&lt;/a&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
      $("#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("&lt;p&gt;&lt;strong&gt;Success! Your message has been sent, thanks!&lt;/strong&gt;&lt;/p&gt;");
                      setTimeout("$.ads.close()", 2000);
                      });
                  }
              }
          });
      });
  &lt;/script&gt;
  
  &lt;div id="toPopup"&gt; 
  
      &lt;div class="close"&gt;&lt;/div&gt;
      &lt;span class="ecs_tooltip"&gt;Press Esc to close &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;div id="popup_content"&gt; &lt;!--your content start--&gt;
      &lt;form action="" method="post" id="ads"&gt;
  
      &lt;div class="formMainDiv"&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Agent Name:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;input type="text" name="txtAgentName" id="txtAgentName" class="inputFeild" /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Ad ID:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;input type="text" name="txtAdsId" id="txtAdsId" class="inputFeild" /&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Comments:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;textarea name="txtComments" id="txtComments" class="inputText"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Call Reason:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;input type="radio" name="rdReason" id="rdReason" value="Not Responding at the moment" /&gt;
                  &lt;label class="lableText"&gt;
                      Not Responding at the moment&amp;nbsp;&amp;nbsp;
                  &lt;/label&gt;
                  &lt;input type="radio" name="rdReason" id="rdReason" value="Busy" /&gt;
                  &lt;label class="lableText"&gt;
                      Busy&amp;nbsp;&amp;nbsp;
                  &lt;/label&gt;
                  &lt;input type="radio" name="rdReason" id="rdReason" value="Call back" /&gt;
                  &lt;label class="lableText"&gt;
                      Call back&amp;nbsp;&amp;nbsp;
                  &lt;/label&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Other Resaons:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;textarea name="txtOtherReason" id="txtOtherReason" class="inputText"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="formDiv"&gt;
  
              &lt;div class="lableHeading"&gt;
                  Call Status:
              &lt;/div&gt;
              &lt;div class="inputDiv"&gt;
                  &lt;img src="/images/icon/green.png" /&gt;
                      &lt;input name="rdFoneStatus" type="radio" value="1"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;img src="/images/icon/red.png" /&gt;
                      &lt;input name="rdFoneStatus" type="radio" value="2"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;img src="/images/icon/gray.png" /&gt;
                      &lt;input name="rdFoneStatus" type="radio" value="3"&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div style="float:right; margin:18px 0 0"&gt;
              &lt;button id="send" class="button"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;/form&gt;
      &lt;/div&gt; &lt;!--your content end--&gt;
  
  &lt;/div&gt; &lt;!--toPopup end--&gt;
  
  &lt;div class="loader"&gt;&lt;/div&gt;
  &lt;div id="backgroundPopup"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS File::</p>
  
  <pre><code>/* 
      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
  </code></pre>