prevent refresh of page when button inside form clicked

javascript html
bunkdeath picture bunkdeath · Oct 18, 2011 · Viewed 302.7k times · Source

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?

Answer

detale picture detale · Nov 7, 2012

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.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More