Onclick with submit button not working properly

Question

I want to put onlick for submit button. I googled many tutorial sites implement all the hints but all that can't solve the problem. When i put an alert inside the called function the alert is working but the tasks which is inside of page-join.php not work. When i put onclick with an image that's work pretty well. What the problem please guide, Due to the form submtion i am not getting the problem in firebug console. So i didn't get what the real problem is.

//This is my function that i am calling from onclick.

  function deltpopdtl()
   {
  var ipss = '<?php echo $baseUrl ;?>/themes/gr-mist/includes/';

  $.ajax({
  url: ipss+"page-join.php?delpopdtl=<?php echo $_GET['pageid'];?>",
  success: function(data){
     }
  });}


// This is my php code(page-join.php)
     if(isset($_GET['delpopdtl'])) 
                {
       global $db;
       $getdetail = "DELETE  FROM firstloadpop WHERE rsc_id=".$_GET['delpopdtl']." and user_id= $user_id";

            mysql_query($getdetail);
             }
//This is my form and submit button
<form method="post" id="" enctype="multipart/form-data" action="#"> 

<input type="submit" id="abc" name="onladinvite" value="sendinvitation" onclick="return deltpopdtl();" />
 //i put only onlick deltpopdtl(); but the same situation, i also tired
 //onclick="return deltpopdtl();return false" but all vain

</form>

Answer 1

you can write like this

function deltpopdtl()
   {
  var ipss = '<?php echo $baseUrl ;?>/themes/gr-mist/includes/';

  $.ajax({
  url: ipss+"page-join.php?delpopdtl=<?php echo $_GET['pageid'];?>",
  success: function(data){
     }
  });

   return false;
}

you can add return false at the end of function body so it do not submit form and also you can debug with firebug

Answer 2

The thing is that when you submit the form the code execute and while doing so it's interrupted and the page reloads. To prevent that you can use the event.preventDefault(); to prevent the default nature of a submit button.

function deltpopdtl(event){
  event.preventDefault();
  var ipss = '<?php echo $baseUrl ;?>/themes/gr-mist/includes/';

  $.ajax({
     url: ipss+"page-join.php?delpopdtl=<?php echo $_GET['pageid'];?>",
     success: function(data){
     }
  });
}

//your html button
<input type="submit" id="abc" name="onladinvite" value="sendinvitation" onclick="deltpopdtl(event);" />

Answer 3

1. You have to write return false before function end because your form is submitted and you cant see your ajax effect.

2. You can change your submit button to type='button'

function deltpopdtl()
{
  var ipss = '<?php echo $baseUrl ;?>/themes/gr-mist/includes/';    
  $.ajax({
         url: ipss+"page-join.php?delpopdtl=<?php echo $_GET['pageid'];?>",
         success: function(data){}
  });
  return false;  //You have to add this line because your form is submitted and you cant see your ajax effec
}