prevent refresh of page when button inside form clicked

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 like this

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

On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.

What should I do to prevent the page refresh?

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.

Let getData() return false. This will fix it.

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

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

The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.

Alternatively, you could also use the preventDefault method of the event object:

function getData(e) {
    e.preventDefault();
}

HTML

<form onsubmit="return false;" id="myForm">
</form>

jQuery

$('#myForm').submit(function() {
    doSomething();
});

<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>

If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.

if you use js do like this

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

**If you use jquery use like this**


<form method="POST">
   <button name="data"  type="button" id="btnData">Click</button>
</form>




$('#btnData').click(function(e){
   e.preventDefault();
   // Code goes here
getData(); // your onclick function call here

});

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);

This one is the best solution:

<form  method="post"> 
	<button  type="button" name="data" onclick="getData()">Click Me</button>
</form>

Note: My code is very simple.

For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .

As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).

I don't think this is an elegant way to do it, but in my case I had no other choice.

Update:

If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:

onsubmit="functionToRun(); return false;"

I don't know why all this trouble with Firefox, but hope this works.

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;
}

I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.

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

I updated on @JNDPNT answer, this way the function (getData()) doesn't have to return false;

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

Add e.preventDefault(); in the starting of the function to be called when the button is clicked

Example:

    const signUp = (e) => {
    e.preventDefault()
    try {
    } catch (error) {
      console.log(error.message)
    }
  }

The button code:

            <input
              type='submit'
              name='submit-btn'
              id='submit-btn'
              value='Sign Up'
              onClick={signUp}
            />

A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.

You will need to rename the function for the page to not be reloaded

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>