Page refreshes when hitting a simple button?

Question

everyone. As you can see i've a form with a button inside. When clicking on the button i want to execute some JavaScript code (not important for this question).

When i'm hitting the delete button, my page refreshes but that's not what i want. Do you guys know why my page refreshes when hitting the button?

HTML CODE

<form id="form" method="POST"> 
    <button type="button "id="delete" name="delete" onclick="delete_data();"><i class="fa fa-remove" aria-hidden="true"></i> Delete Zone(s)</button>
</form>

Javascript Code

function delete_data(){
        //this function is used to obtain id's of selected checkboxes.

        var checkedIds = $(".chk:checked").map(function() {
            return this.id;
        }).toArray();

        alert(checkedIds);
    }

Answer 1

You should prevent the default behavior of happening:

function delete_data(event){
        event.preventDefault();
        //this function is used to obtain id's of selected checkboxes.

        var checkedIds = $(".chk:checked").map(function() {
            return this.id;
        }).toArray();

        alert(checkedIds);
    }

Answer 2

event.preventDefault() will help to stop the default behaviour.

function delete_data(){
   event.preventDefault();
    var checkedIds = $(".chk:checked").map(function() {
        return this.id;
    }).toArray();

    alert(checkedIds);
}

Answer 3

e.preventDefault() will prevent the default event from occuring. That's mean it prevents any default browser actions from being executed.

You should add e.preventDefault() as the first line in the handler.

function delete_data(event){
        event.preventDefault();

        //...
}