How do I make an HTML button not reload the page

Question

I have a button   lt input type  submit  gt    When it is clicked the page reloads  Since I have some jQuery hide   functions that are called on page load  this causes these elements to be hidden again  How do I make the button do nothing  so I can still add some action that occurs when the button is clicked but not reload the page

User · Answer

Use either the  lt button gt  element or use an  lt input type  button   gt

User · Answer

there is no need to js  or jquery  to stop page reloading just specify the button type as  button   if you dont specify the button type  browser will set it to  reset  or  submit  witch cause to page reload    lt button type  button  gt submit lt  button gt

User · Answer

You could add a click handler on the button with jQuery and do return false      input type  submit     click function     return false        or     form   submit function     return false

User · Answer

You can use a form that includes a submit button  Then use jQuery to prevent the default behavior of a form    x000D   x000D    document  ready function      x000D      document  on  submit     submit-form   function event    x000D      event preventDefault    x000D     x000D      alert  page did not reload    x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt form id  submit-form  gt  x000D     lt button type  submit  gt submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

In HTML    lt input type  submit  onclick  return false    With jQuery  some similar variant  already mentioned

User · Answer

I can t comment yet  so I m posting this as an answer  Best way to avoid reload is how  user2868288 said  using the onsubmit on the form tag    From all the other possibilities mentioned here  it s the only way which allows the new HTML5 browser data input validation to be triggered   lt button gt  won t do it nor the jQuery JS handlers  and allows your jQuery AJAX dynamic info to be appended on the page  For example    lt form id  frmData  onsubmit  return false  gt    lt input type  email  id  txtEmail  name  input email  required    placeholder  Enter a valid e-mail  spellcheck  false   gt    lt input type  tel  id  txtTel  name  input tel  required    placeholder  Enter your telephone number  spellcheck  false   gt    lt input type  submit  id  btnSubmit  value  Send Info   gt   lt  form gt   lt script type  text javascript  gt      document  ready function            btnSubmit   click function             var tel       txtTel   val            var email       txtEmail   val              post  scripts contact php                 tel1  tel              email1  email                     done function data                    lblEstatus   append data      Appends status             if  data     Received                         btnSubmit   attr  disabled    disabled       Disable doubleclickers                                    fail function xhr  textStatus  errorThrown                     lblEstatus   append  Error  Try later                                    lt  script gt

User · Answer

As stated in one of the comments  burried  above  this can be fixed by not placing the button tag inside the form tag  When the button is outside the form  the page does not refresh itself

User · Answer

In HTML    lt form onsubmit  return false  gt   lt  form gt    in order to avoid refresh at all  buttons   even with onclick assigned

[html] How do I make an HTML button not reload the page

Examples related to html

Examples related to button

Examples related to dom-events