防止页面重新加载并在单击提交按钮时调用jquery函数

Question

The form tag contents are:-

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >

The button tag contents are :-

<input type="submit" id="submit_button" value="Submit">

The j-query functions are

$('#submit_button').click(function ()
            {        
                alert("button clicked");
                buildingVal = $("#building").val();
                levelVal = $("#level").val();
                data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();
                $.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                    }
                });
                return false;
            });

The page is getting reloaded, and the data in the textboxes and dropdown menus are disappearing.

but if i have only this code in the jquery:-

$('#submit_button').click(function ()
            {        
                alert("button clicked");
 return false;
            });

then the page doesn't reload and the values remains intact.

Please could you tell me how am i to prevent the page from reloading?

Also in the ajax call i will be calling a page res.php which will return a table,

What will the code be in the

success: function (data) {
                    }

please help...

Edit:

I am passing the data into the res.php page with the code

data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

and then pass it into the page using

$.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                        $('#npc').html(data);
                    }
                });

in the res.php page

how do i extract the two values from the single value that was passed

i have tried using the following code

$building = mysql_real_escape_string($_GET['building']);
$level = mysql_real_escape_string($_GET['level']);

But it doesn't work...

Answer 1

You have an error in jQuery code:

Error:

buildingVal = $("#building").val();
levelVal = $("#level").val();
data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

Solution:

buildingVal = $("#building");
levelVal = $("#level");
data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();

Complete code js:

$('#submit_button').click(function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

   return false;

});

Edit

If your ever going to use this form to send data by ajax, the best way is to cancel the event "submit" the form:

HTML:

<form id="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >
...
</form>

JS:

$('#myform').bind('submit', function(event) {

     return false;
});

$('#submit_button').bind('click', function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

});

Answer 2

Best way is to not use a submit button in the first place.

<input type="button" id="myButton" value="Submit">


$('#myButton').on('click', function(){
   //do ajax
});

Answer 3

You need to prevent the default behavior in your click event:

$('#submit_button').click(function (event)
{
    event.preventDefault();
    alert("button clicked");
    return false; // Not truly necerssary
});

http://api.jquery.com/event.preventDefault/

Answer 4

So in order for the submit button to not submit your page with its default behavior do the following:

$('#submit_button').click(function (event) {        
                event.preventDefault();
                buildingVal = $("#building").val();
                levelVal = $("#level").val();
                data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();
                $.ajax(
                {

                    url: "res.php", 
                    type: "POST",
                    data: data,     
                    success: function (data) {
                    }
                });                
});