Don't reload after submit jquery

Question

I have problem to implement "do not reload after submit" with jquery. Same html code is for name too. I post limit code, but there is same for name select values. Can someone show me to implement here?

Jquery

    <script type='text/javascript'>
$(document).ready(function() {

// process the form
$('form').submit(function(event) {

    var formData = {
        'name'              : $('input[id=select_name]').val(),
        'limit'             : $('input[id=select_limit]').val()
    };

    $.post('index.php?cat=fthome', function(formData) {

})
        .done(function(data) {
            console.log(data);
        });
    event.preventDefault();
});

});
    </script>

HTML

<input class="btn-select-input" id="select_limit" name="limit" type="hidden">
<span class="btn-select-value">All names</span>
<ul name="limit">
<li <?if ($_POST['limit']=="12") echo 'class="selected"'?>>12</li>
<li <?if ($_POST['limit']=="6") echo 'class="selected"'?>>6</li>
<li <?if ($_POST['limit']=="4") echo 'class="selected"'?>>4</li>
</ul>

<button id="js-trigger-overlay" type="submit" class="btn btn-success">Search</button>

@user3307783 Siraj's first comment is incorrect because the [default `type` attribute of `button` elements is `submit`](https://developer.mozilla.org/en/docs/Web/HTML/Element/button#attr-type), however the second comment from him should work. — Mike, Apr 29 '16 at 20:53
Doesn't work in any case with and without type submit,button — user3307783, Apr 29 '16 at 21:10

score 5 · Answer 1 · answered Apr 29 '16 at 20:19

Use the jQuery event.preventDefault() action:

$('#js-trigger-overlay').click(function(event){ // add event parameter
    event.preventDefault();

    ...

This prevents the action from performing any other action, including the actual submit action, since you already handle that with a post action.

(More Info)

Don't reload after submit jquery

1 Answers1