Why won't this AJAX form behave?

Question

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",
      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.

Raynos · Accepted Answer · 2011-05-12T13:39:39.397

2

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.

edited May 12 '11 at 13:39

answered May 12 '11 at 13:29

Raynos

166,823
56
351
396

bish bash bosh you're a hero. will give you some loving when it lets me. – artparks May 12 '11 at 13:32
Isn't `event.preventDefault()` a better way to prevent, well, the default behavior ? – Clement Herreman May 12 '11 at 13:37

score 1 · Answer 2 · edited May 23 '17 at 12:26

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.

score 0 · Answer 3 · answered May 12 '11 at 13:28

0

Try changing this

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

EdIT:

Istead of true and false try 0 and 1

answered May 12 '11 at 13:28

jimy

4,848
3
35
52

makes no difference unfortunately although is probably more sensible – artparks May 12 '11 at 13:30

score 0 · Answer 4 · answered May 12 '11 at 13:31

0

You need the call event.stopPropagation()

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

answered May 12 '11 at 13:31

August Karlstrom

10,773
7
38
60

Why won't this AJAX form behave?

4 Answers4