prevent refresh of page when button inside form clicked

Question

I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.

My simple code goes

Answer 1

A javascript method to disable the button itself

document.getElementById("ID NAME").disabled = true;

Once all form fields have satisfied your criteria, you can re-enable the button

Using a Jquery will be something like this

$( "#ID NAME" ).prop( "disabled", true);

Answer 2

All you need to do is put a type tag and make the type button.

<button id="btnId" type="button">Hide/Show</button>

That solves the issue

Answer 3

Add type="button" to the button.

<button name="data" type="button" onclick="getData()">Click</button>

The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.

Answer 4

Return function is not working in all the cases. I tried this:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

It didnt work for me.

I tried to return false inside the function and it worked for me.

function Reset()
{
    .
    .
    .
    return false;
}

Answer 5

You can use ajax and jquery to solve this problem:

<script>
    function getData() {
        $.ajax({
            url : "/urlpattern",
            type : "post",
            success : function(data) {
                alert("success");
            } 
        });
    }
</script>
<form method="POST">
    <button name="data" type="button" onclick="getData()">Click</button>
</form>

Answer 6

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

instead of using button tag, use input tag. Like this,

<form method="POST">
    <input type = "button" name="data" onclick="getData()" value="Click">
</form>