Why won't this AJAX form behave?

No matter what I do this form won't behave via AJAX at all. There's 4 (3 in this case) different buttons that the user clicks to select a size and the value of this button gets used in the form processing. It will also gracefully degrade (when it works) with the #is_ajax hidden field..

HTML:

    <form action="../bin/func/actions/add.action.php" method="post" id="addToCart"> 
        <input type="hidden" name="is_ajax" value="false" id="is_ajax"> 
        <input type="hidden" name="action" value="add">   
        <button class="add-size" value="S">S</button> 
        <span class="no-stock">M</span>  
        <button class="add-size" value="L">L</button> 
        <button class="add-size" value="XL">XL</button> 
    </form> 
            <div id="cart-success"></div>

jQuery:

$(function() {  
$(".add-size").click(function() {
    // first off set hidden variable to TRUE so we know AJAX is playing ball
    $("#is_ajax").val(true);

    // serialise the form data
    var dataString = 'size=' + $(this).val() + '&is_ajax=' + $("#is_ajax").val();

    // slide down the small cart
    $("#cart-expand").slideDown(200); 
    $("#cart-thumb a").toggle();

    // let's do this..
    $.ajax({
      type: "POST",
 开发者_如何学Python     url: "../bin/func/actions/add.action.php",
      dataType: 'html',
      data: dataString,
      success: function(data){
        $("#cart-success").html(data);          
        return false;
      }
    }); 
});
});

PHP (brace yourself)

<?php
if( $_POST['is_ajax'] == 'true' )
    echo 'true';
else
    echo 'false';
?>

No matter what I do the default form action always seems to kick in and the page redirects straight to the PHP page. If I remove the $.ajax() part then the rest of it works, there's something wrong there it seems.

Also I don't think it's because I'm not doing $("#form-ID").submit()... as I've tried it this more conventional way and it still doesn't work. If I put

alert( dataString );
return false;

After I create the datastring all is behaving as it should, it's only after we get to the ajax bit that it all goes wrong and it seems to drop out of jQuery and just do a normal post submit to the address in the HTML.

Help! Thanks.

return false;

Your trying to return false to your click function from inside your ajax callback. This return statement doesn't return to your click function.

You need return false; at the end of your ajax statement.

$.ajax({ 
  ...
  success: function() {
    $("#cart-success").html(data); 
  }
});
return false;

As pointed out by @ClementHerreman using

$(obj).click(function(event) { // <- event param
  ...
  event.preventDefault();
});

Would be better.

Not really answering specifically your question but, if you want to know if a form was submitted using AJAX, you can just take a look at the HTTP request headers.

Example:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
    //submitted via AJAX
}
else
{
    //not submitted via AJAX
}

Note that this isn't a 100% accurate guess. See Does $_SERVER['HTTP_X_REQUESTED_WITH'] exist in PHP or not? for more explainations.

Try changing this

$("#is_ajax").val('true');

EdIT:

Istead of true and false try 0 and 1

You need the call event.stopPropagation()

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