Jquery preventDefault on form is not working

Question

Ok so I looked around other forums and can't see why mine is still being...GAH. I call preventDefault() so the form doesn't submit. I've tried having the action set to nothing and then not even providing an action attribute at all on the form tag.

I've also tried doing the submit button as a button instead of a submit and still it doesn't seem to want to work. The form is still loading the page on submit.. when I don't want it to. I'm trying to update the price of an item in a usershop with AJAX so it updates the value of the price without reloading the page in the span tag.

HTML:

<form id="price_form" method="POST" action="http://alkharia.localhost/user/shop/priceitem/3" accept-charset="UTF-8"><input type="hidden" name="csrf_token" value="P0oW2VxJ6HTg79ksIYl6U3R5QKapeFGwkkUKiNlQ">
<div class="row clearfix">
    <div class="full">
        <label for="price">Price</label>
        <input maxlength="6" type="text" name="price" value="0" id="price">    </div>
</div>
<div class="row">
    <div class="full">
        <input type="hidden" name="item_id" value="3">
        <input type="submit" value="Submit">    </div>
</div>

</form>

JQuery:

$('#price_form').submit(function(e) {
   e.preventDefault();
   var price = $('#price').val();
   if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) {
       var itemID = $('#item_id').val();

       $.ajax({
        type: 'POST',
        url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price,
        success: function(msg) {
            $('#cur_price_'+itemID).html(msg);
        }
    });
  } else {
    alert('You can only enter an integer that is less than 999,999!');
    return false;
  }
});

Solution 1

I would remove the e.preventDefault() altogether, and move return false; to outside the if/else statement.

If your condition is met, the AJAX call is made. If not, the alert is displayed. Either way, the form is not submitted.

Edited version:

$('#price_form').submit(function(e) {
    var price = $('#price').val();

    if((Math.floor(price) == price) && ($.isNumeric(price)) && (price.length <= 6)) {
        var itemID = $('#item_id').val();

        $.ajax({
            type: 'POST',
            url: 'http://'+urlBase+'/user/shop/priceit/'+itemID+'/'+price,
            success: function(msg) { $('#cur_price_'+itemID).html(msg); }
        });
    } else {
        alert('You can only enter an integer that is less than 999,999!');
    }

    return false;
});

Solution 2

Ok seems as if the script file wasn't being included somehow.. even though it shows up.. but I don't know since I'm using the javascript dialog, that I had to INCLUDE that script AGAIN at the bottom of the dialog box. But when I did that, it fixed everything.. weird as it seems. But I still marked another question correct since return false or a better alternative than e.preventDefault();

Solution 3

Change the submit to a button, and you can bind the JS to a click event.

Difference between <input type='button' /> and <input type='submit' />