Clicking a Button Within a Form Causes Page Refresh

prevent refresh of page when button inside form clicked

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

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

Clicking a button within a form causes page refresh

If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.

The thing to note in particular is where it says

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"

How do I make an HTML button not reload the page

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.

 <button type='button'>submit</button> 

The page will strangely refresh when I click the button

You should add type="button" to your <button>.

If you don't specify a type of a <button> in a <form>, it will behave like a submit button by default, which refreshes the page.

Docs:

<type="submit"> The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

Web page refreshes itself after I clicked a button. How could I avoid it?

You have to change your button type to "button" and put event onclick="osszead()". By default html button type is "submit" and as a default behaviour, clicking submit button submit it's data to it's action url.

<button type="button" onclick="osszead()">go</button>

Why would a button click event cause site to reload in a Bootstrap form?

A <button> tag uses Submit behavior by default. Thus your page submits the form when the button is clicked and this looks like a page refresh itself. To work around this you can either use an input tag

<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Continuar"/>

to do the same effect. Or you can cancel the Submit in your button's click Event Handler (if that's what you want) like this:

$(".btnSeccion").click(function(event) {
    btnMostrarSeccion($(this));
    event.preventDefault();
})

HTML page is refreshing after clicking on submit button with onclick function

Your issue comes from that, when you submit:

1. you execute the chargement() function as stated by the onclick attribute, and it works
2. but since your button has type="submit" its default behaviour is to submit the form: then the action="index.php" is executed, so reloading the page, which obviously doesn't not include what you'd just put into the res div

To avoid this (i.e work without reloading the page) you can use two ways:

• one is to prevent default action, either as already proposed by @anhkzet (
  but in your case it can't work "as is"; look at it's answer's edit), or by adding event as argument to your chargement() function, then including event.preventDefault; before it ends

• more simply you can change your <input type="submit"...> into <button type=button"...>: this way the form is not submitted at all.

---

EDIT in response to the supplemental question added by the OP in its comment below.

In order to use POST rather than GET you can merely substitute the desired method in your XMLHttpRequest.open() function.

I guess that you ask it because you're incertain about how to pass POST data in this case.

In fact there is no place in the method for an argument that would contain such data, but it doesn't matter: like with the <form> tag you can at once use POST method and keep query parameters attached to the url.

Keep clicking Refresh button until data appears

Can you just wait on the filename?

cy.contains('[data-render-row-index="1"] > [data-col-index="1"]', filename, 
  { timeout: 30_000 }
)

---

If the reload is needed to get the correct row entry, a repeating function is a possibility

function refreshForData(filename, attempt = 0) {

  if (attempt > 30 ) {            // 30 seconds with a 1s wait below
    throw 'File did not appear'
  }

  // Synchronous check so as not to fail
  const found = Cypress.$(`[data-render-row-index="1"] > [data-col-index="1"]:contains('${filename}')`)

  if (!found) {
    cy.wait(1_000)
    cy.get('Reload button').click()
    cy.get('Spinner').should('not.be.visible')
    refreshForData(filename, ++attempt)
  }
}

refreshForData(filename)  // pass in filename, function can be globalized
                          // maybe also pass in selector?

---

Related Topics