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 like this   lt form method  POST  gt       lt button name  data  onclick  getData    gt Click lt  button gt   lt  form gt    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

User · Answer

All you need to do is put a type tag and make the type button    x000D   x000D   lt button id  btnId  type  button  gt Hide Show lt  button gt  x000D   x000D   x000D    That solves the issue

User · Answer

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

User · Answer

You can use ajax and jquery to solve this problem    lt script gt      function getData               ajax               url     urlpattern               type    post               success   function data                    alert  success                                      lt  script gt   lt form method  POST  gt       lt button name  data  type  button  onclick  getData    gt Click lt  button gt   lt  form gt

User · Answer

Return function is not working in all the cases   I tried this     lt button id  Reset  class  Button-class  onclick  return Reset    gt Show result lt  button gt    It didnt work for me    I tried to return false inside the function and it worked for me   function Reset                           return false

User · Answer

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

User · Answer

Let getData   return false  This will fix it    lt form method  POST  gt       lt button name  data  onclick  return getData    gt Click lt  button gt   lt  form gt

User · Answer

lt form method  POST  gt       lt button name  data  onclick  getData    gt Click lt  button gt   lt  form gt    instead of using button tag  use input tag  Like this    lt form method  POST  gt       lt input type    button  name  data  onclick  getData    value  Click  gt   lt  form gt

User · Answer

This one is the best solution    lt form  method  post  gt        lt button  type  button  name  data  onclick  getData    gt Click Me lt  button gt   lt  form gt    Note  My code is very simple

User · Answer

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    lt form method  POST  gt       lt button name  data  onclick  getData    return false  gt Click lt  button gt   lt  form gt

User · Answer

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   lt form method  POST  gt      lt button name  data   type  button  id  btnData  onclick  getData    gt Click lt  button gt   lt  form gt      If you use jquery use like this      lt form method  POST  gt      lt button name  data   type  button  id  btnData  gt Click lt  button gt   lt  form gt          btnData   click function e      e preventDefault          Code goes here getData       your onclick function call here

User · Answer

Add type  button  to the button    lt button name  data  type  button  onclick  getData    gt Click lt  button gt    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

User · Answer

HTML   lt form onsubmit  return false   id  myForm  gt   lt  form gt    jQuery      myForm   submit function         doSomething

User · Answer

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

[javascript] prevent refresh of page when button inside form clicked

Examples related to javascript

Examples related to html