No data saved with AJAX POST request in jQuery

Question

I'm having some problems with a jQuery form submission. Here is my jQuery code;

$.ajax({
    type: 'POST',
    url: 'chat/password.php',
    data: $("#roomform").serialize(),
    success: function(msg) {
        alert( "Data Saved: " + msg );
    }
});

However, it will only ever alert the following text;

Data saved:

With no data.

The PHP that returns data is;

if(!$roompass) {
    echo "0";
}else{
    if(!$check) {
        echo "0";
    }else{
        if($roompass == $check['password']) {
            echo "1";
        }else{
            echo "0";
        }
    }
}

Any help is appreciated, thanks!

Answer 1

You have to active ajax only when you submit the form and prevent the default browser form submission.

$('#roomform').sumbit(function(e) {
   e.preventDefault();
   $.ajax({
       async: true,
       type: 'POST',
       url: 'chat/password.php',
       data: $("#roomform").serialize(),
       success: function(msg) {
           alert( "Data Saved: " + msg );
       }
   });
});