Avoid closing Bootstrap Modal when specific button inside is clicked

Question

I implemented a modal with a form inside with 5 buttons: Submit, 2 Close buttons, and 2 more for an input number spinner that allows the user to select a quantity using "+" and "-" buttons. The problem is that every time the "+" or "-" button are clicked, the modal is closed, which is a normal behavior for modals when pressing submit or close buttons but I need the modal to stay visible and allow the user to select the quantity without the modal been closed.

This are the buttons inside the form that control the number spinner:

<div class="item-count">
    <div class="input-group number-spinner">
        <span class="input-group-btn">
            <button class="btn btn-default" id="spin1" data-dir="dwn">-</button>
        </span>
        <input type="text" class="form-control text-center" name="quantity" value="1">
        <span class="input-group-btn">
            <button class="btn btn-default" id="spin2" data-dir="up">+</button>
        </span>
    </div>  
</div>

And this is the function that control the input spinner:

<script>
    $(document).on('click', '.number-spinner button', function () {    
        var btn = $(this),
        oldValue = btn.closest('.number-spinner').find('input').val().trim(),
        newVal = 0;             
        if (btn.attr('data-dir') == 'up') {
            newVal = parseInt(oldValue) + 1;
        } else {
            if (oldValue > 1) {
                newVal = parseInt(oldValue) - 1;
            } else {
                newVal = 1;
            }
        }
        btn.closest('.number-spinner').find('input').val(newVal);
    });
</script>   

if I use the e.preventDefault() (associated to ID's for the buttons for this purpose: spin1 and spin2) to avoid the modal to be closed, the modal stays visible but the spinner doesn't not update the quantity input with the new value, and he form sends the default value of 1 to the server to be processed. Any guidance is appreciated. Thanks.

Answer 1

When you tried e.preventDefault(), did you pass the event to the function?

If not check the console, there must be an error saying that 'e' is undefined.

So just pass 'e'(the event), then it should work.

$(document).on('click', '.number-spinner button', function (e) {  
        e.preventDefault();
        var btn = $(this),
        oldValue = btn.closest('.number-spinner').find('input').val().trim(),
        newVal = 0;             
        if (btn.attr('data-dir') == 'up') {
            newVal = parseInt(oldValue) + 1;
        } else {
            if (oldValue > 1) {
                newVal = parseInt(oldValue) - 1;
            } else {
                newVal = 1;
            }
        }
        btn.closest('.number-spinner').find('input').val(newVal);
    });

Answer 2

I think the best solution will be adding <a href> tag with the button style.