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;
  }
});

http://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery and by proxy: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — Matt Whipple, Jun 30 '13 at 01:56
I would think it would work, but it's just leading to the url provided by the AJAX.. or by the form action attribute. So it's loading to that page after I submit it instead of doing all the other logic.. :/ — Peanut, Jul 01 '13 at 17:42
And there is nothing appearing in my JS console because it's not throwing any errors since it's just leading to that page.. (the url specified) which it's not suppose to.. :/ — Peanut, Jul 01 '13 at 17:46

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

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' />

edited May 23 '17 at 10:30

Community

1
1

answered Jun 30 '13 at 02:05

Nick Zhu

89
5

Would this still work if the user submitted the form by pressing enter? – danchet Dec 31 '13 at 01:13

score 1 · Answer 2 · answered Jul 01 '13 at 19:01

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();

Rob Kovacs · Accepted Answer · 2013-06-30T05:00:14.907

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;
});

score -1 · Answer 4 · answered Jun 30 '13 at 01:51

-1

Replace your 'submit' input with an anchor tag, set the href to # and bind your ajax function to that.

answered Jun 30 '13 at 01:51

relic

1,662
1
16
24

@Blender Define "right"... because if he's submitting a form, and then immediately trying to squelch the post in order to do something else on the page... it sounds to me like that's not a form-submit at all. – relic Jun 30 '13 at 01:55
1

The "right" way preserves usability when JS is disabled. If you prevent the `submit` event from happening, the form never submits. – Blender Jun 30 '13 at 01:56
although OP's code don't look like it would degrade gracefully – isJustMe Jun 30 '13 at 01:58
@Blender Point taken.. but it kinda sounds like if JS is ENABLED, the form never submits as it is now. Granted I don't know the nature of the OPs project, but I assumed he wasn't gathering data on users with JS enabled/disabled. – relic Jun 30 '13 at 01:58
@relic180: If the code worked, the form would never submit. Also, binding it to the submit button won't handle form submits triggered by keyboard events. – Blender Jun 30 '13 at 02:02
I want to be able to allow people who have javascript disabled for it to submit so this is the only way I find capable of doing so.. ?? – Peanut Jun 30 '13 at 02:20

score -1 · Answer 5 · answered Jun 30 '13 at 02:00

-1

Bind the event to the input[type=submit] click event instead of the form submit.

answered Jun 30 '13 at 02:00

Robert McKee

21,305
1
43
57

Jquery preventDefault on form is not working

5 Answers5