impedir a atualização da página ao clicar no botão dentro do formulário

Tenho um problema ao usar os botões dentro do formulário. Quero que esse botão chame a função. Sim, mas com resultado indesejado que atualiza a página.

Meu código simples é assim

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

Ao clicar no botão, a função é chamada com a página atualizada, que redefine toda a minha solicitação anterior que afeta a página atual que foi o resultado da solicitação anterior.

O que devo fazer para impedir a atualização da página?

Vamos getData()retornar falso. Isso vai consertar.

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

Adicione type="button"ao botão

<button name="data" type="button" onclick="getData()">Click</button>

O valor padrão de typepara um botão é submit, que publica automaticamente o formulário no seu caso e faz com que pareça uma atualização.

Tudo o que você precisa fazer é colocar uma tag de tipo e pressionar o botão de tipo.

<button id="btnId" type="button">Hide/Show</button>

Isso resolve o problema

O problema é que ele aciona o envio do formulário. Se você criar a getDatafunção return false, ela deverá interromper o envio do formulário.

Como alternativa, você também pode usar o preventDefaultmétodo do objeto de evento:

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>

em vez de usar a tag de botão, use a tag de entrada. Como isso,

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

Se o seu botão for "botão" padrão, certifique-se de definir explicitamente o atributo type, caso contrário, o formulário da Web o tratará como envio por padrão.

se você usar js faça assim

<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

});

Um método javascript para desativar o próprio botão

document.getElementById("ID NAME").disabled = true;

Depois que todos os campos do formulário atenderem aos seus critérios, você poderá reativar o botão

Usar um Jquery será algo como isto

$( "#ID NAME" ).prop( "disabled", true);

Por qualquer motivo no Firefox, embora eu tenha return false;e myform.preventDefault();na função, ele atualiza a página após a execução da função. E não sei se essa é uma boa prática, mas funciona para mim, insirojavascript:this.preventDefault(); no atributo action.

Como eu disse, tentei todas as outras sugestões e elas funcionam bem em todos os navegadores, mas o Firefox, se você tiver o mesmo problema, tente adicionar o evento prevent no atributo action javascript:return false;ou javascript:this.preventDefault();. Não tente comjavascript:void(0); que irá quebrar o seu código. Não me pergunte por que :-).

Não acho que seja uma maneira elegante de fazê-lo, mas no meu caso não tive outra escolha.

Atualizar:

Se você recebeu um erro ... depois que o ajax é processado, remova a ação do atributo e, no onsubmitatributo, execute sua função seguida pelo retorno falso:

onsubmit="functionToRun(); return false;"

Não sei por que todo esse problema com o Firefox, mas espero que funcione.

A função Return não está funcionando em todos os casos. Eu tentei isso:

<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>

Não funcionou para mim.

Eu tentei retornar false dentro da função e funcionou para mim.

function Reset()
{
    .
    .
    .
    return false;
}

Eu estava enfrentando o mesmo problema. O problema está com a onclickfunção Não deve haver nenhum problema com a função getData. Funcionou fazendo com que a onclickfunção retornasse falsa.

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

Esta é a melhor solução:

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

Nota: Meu código é muito simples.

Você pode usar ajax e jquery para resolver esse problema:

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