ajax call with html form won't work properly

I'm stuck.

It's like the script doesn't have any function at all.

        <script>
            $("#continue").click(function () {
        $.ajax({
           type: "POST",
           url: "dbc.php?check=First",
           data: {full_name : $('#full_name').val()
                 usr_email : $('#usr_email').val()},
           success: function(msg){
               if(msg==1){
                  $("#First_1").hide();
                  $("#Next_2").toggle(); 
               }else{
                  alert(msg)
               }               
            }
         });
         return false;
    }); 
        </script>

        <form action="index.php?page=checkin" method="post" name="regForm">
     <div id="First_1">
    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
   开发者_如何学编程                             <table cellpadding="0" cellspacing="5">
                                    <tr>
                        <td style="padding: 5px;">
                        Fullständiga namn: 
                        </td>
                        <td>
                        <input name="full_name" type="text" id="full_name" class="required"> 
                        </td>
                                    </tr>
                                    <tr>
                        <td style="padding: 5px;">
                        Email:
                        </td>
                        <td>
                        <input name="usr_email" type="text" id="usr_email" class="required email">
                        </td>
                                    </tr>
                                    <tr>
                        <td style="padding: 5px;">
                        Sex: 
                        </td>
                        <td>
                        <select name="sex">
                        <option value="male">Kille</option>
                        <option value="female">Tjej</option>
                        </select>
                        </td>
                                    </tr>
                        <td>
                        <input type="submit" id="continue" value="Continue">
                        </td>
                </table>
        </td>
            </tr>
    </table>
</div>

With this when i press continue it should send ajax call, but it doesn't. When i press Continue it just takes me to the form´s action="index.php?page=checkin", even if theres return false; on click(in the script)? I even tried to change the form line and inserted onsubmit="return false;" but then nothing happens at all when i click on the button.

The problem is it's doing the default action, because none of your jQuery code is running :) When your code runs, the id="continue" element isn't there yet, so $("#continue") doesn't find anything to bind a click handler to. It's an easy fix, wrap your code in a document.ready call, like this:

$(function() {
  $("#continue").click(function () {
    $.ajax({
       type: "POST",
       url: "dbc.php?check=First",
       data: {full_name : $('#full_name').val()
             usr_email : $('#usr_email').val()},
       success: function(msg){
           if(msg==1){
              $("#First_1").hide();
              $("#Next_2").toggle(); 
           }else{
              alert(msg)
           }               
        }
     });
     return false;
  });
}); 

By doing this it'll wait until the DOM is ready, and your elements are there to find/bind to. Also instead of attaching to the #continue button's click event, it's usually better to attach to the form's submit handler, so it's caught there, so instead of this:

$("#continue").click(function () {

You would do this:

$("form[name='regForm']").submit(function() {

With everything else staying the same.

Sounds to me like a typo and it looks like in your data field.

I would suggest doing

data: "value1="+$("#val1").val()+"&value2="+$("#val2").val() 

Also a good way to debug javascript is to open up chrome's console or in firefox use firebugs console and when you perform the action it will usually inform you of a problem or lack thereof.

One last note: I would suggest using json in your return from php, this way you can provide user with a more catered message. For example, lets say your form doesnt validate server side (you are validating server side right?) you can return to client a nice message explaining to them waht did not validate. How to do this?

  $.ajax({
           type: "POST",
           url: "dbc.php",
           data: "val1="+$(#val1).val()+"&val2="+$(#val2).val(), 
           success: function(json){
               if(json.error){
                  //notify user of error message
                  $(#statusDiv).(json.message); 
               }else{
                  //perform success 

               }               
            }
         });

And on the server side to use something such as

echo json_encode(array("error"=>1, "message"=>"<insert validation problems here>")); 

This will on success function have access via json.error, or json.message.

In your new code on phpbin you need a comma after the line:

 data: "full_name="+$("#full_name").val()+"&usr_email="+$("#usr_email").val(), // <-- COMMA HERE

Or, in your old code (which is nicer since you don't have to deal with concatenating the data url yourself), you were missing a comma also, between the two lines:

data: {full_name : $('#full_name').val(), // <-- COMMA HERE
         usr_email : $('#usr_email').val()},

ALSO, you need a semicolon after this line:

alert(msg); // <-- SEMICOLON HERE

;)