Question

When I’m using jQuery UI input feature, when button has been clicked, it submit/refresh the entire webpage. How can I stop/cancel the entire web to reload?

<input style='width:65px;' type='button' class='ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all Bags' id='Buy' name='".$idn."' value='Buy Bags'>

Was it something like:

$('.Bags').click(function(){
    var $a = $(this).val();
    var $b = $(this).attr('id');
    var $c = $(this).attr('name');
    /* input/button is the issue, how do i stop the form from refreshing? */
});

Thanks in advance!

EDIT

After learning a few things here/there, found another easy way to do this, tho some may disagree, but it works so far:

<input style='width:65px;' type='button' class='Bags' id='Buy' name='".$idn."' value='Buy Bags' onclick='return false;'>

By adding “onClick=’return false;’” will stop the form from refreshing/reloading.

Answer 1

Assuming .Bags has a submit action (which in your case it doesn’t so the preventDefault is not needed:

$('.Bags').click(function(e){
    var $a = $(this).val();
    var $b = $(this).attr('id');
    var $c = $(this).attr('name');
    .ajax(blah blah blah); (this one I know - input/button is the issue)
    e.preventDefault(); // prevents default
    return false; // also prvents default (i like to add both but just the e.preventDefault is required :) )
});