Como cancelo o envio do formulário no evento onclick do botão submit?

99

Estou trabalhando em um aplicativo da web ASP.net.

Eu tenho um formulário com um botão de envio. O código para o botão de envio é semelhante a <input type='submit' value='submit request' onclick='btnClick();'>.

Quero escrever algo como o seguinte:

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

Como eu faço isso?

Rio Vivian
fonte
ai, isso está fazendo minha cabeça doer. Tenho várias submitentradas diferentes . Acho que tentarei usar controles do lado do servidor nesta página.
Vivian River

Respostas:

183

Você está melhor fazendo ...

<form onsubmit="return isValidForm()" />

Se isValidForm()retornar false, seu formulário não foi enviado.

Você provavelmente também deve mover seu manipulador de eventos embutido.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
alex
fonte
Legal, mas parece que não consigo onsubmittrabalhar sempre que estou usando ASP.net porque asp.net envolve TUDO em sua própria forma ...
Vivian River
5
Você pode usar sua segunda sugestão. O javascript embutido é o diabo de qualquer maneira.
Stephen de
3
Se você estiver usando formulários da web ASP.NET (dica: não), não tente incluir outros formulários. Eles são simplesmente incompatíveis. Ouvi dizer que a ASP.NET MVC permite criar aplicativos da web usando marcação idiomática.
Quentin de
@David, se o uso de outros formulários for incompatível com os formulários da web ASP.net, devo usar apenas os controles do lado do servidor?
Vivian River de
2
Alguém respondeu EXATAMENTE como você stackoverflow.com/a/23604664/1639385 . Acho que foi muita coincidência.
Ulysses Alves
43

Altere sua entrada para o seguinte:

<input type='submit' value='submit request' onclick='return btnClick();'>

E retornar falso em sua função

function btnClick() {
    if (!validData())
        return false;
}
Mikefrey
fonte
13

Você precisa mudar

onclick='btnClick();'

para

onclick='return btnClick();'

e

cancelFormSubmission();

para

return false;

Dito isso, eu tentaria evitar os atributos de evento intrínsecos em favor de JS discreto com uma biblioteca (como YUI ou jQuery) que tem uma boa API de manipulação de eventos e se conecta ao evento que realmente importa (ou seja, o evento de envio do formulário em vez do evento de clique do botão).

Quentin
fonte
2
Usar onclick permitirá que o usuário pressione enter e ignore a verificação.
Cfreak
7

Às vezes onsubmit, não funcionaria com asp.net.

Resolvi de maneira muito fácil.

se tivermos tal formulário

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

Agora você pode capturar get esse evento antes do postback do formulário e interrompê-lo no postback e fazer todo o ajax que quiser usando este jquery.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });
Shady Sherif
fonte
5

você deve alterar o tipo de submitpara button:

<input type='button' value='submit request'>

ao invés de

<input type='submit' value='submit request'>

você então obtém o nome do seu botão em javascript e associa a ação que você deseja

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

funcionou para mim espero que ajude.

Maomé
fonte
4

Você precisa return false;:

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}
SLaks
fonte
1

Por que não alterar o botão de envio para um botão normal e, no evento de clique, enviar seu formulário se ele passar nos testes de validação?

por exemplo

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 
George Johnston
fonte
1
Pressionar Enter irá ignorar a verificação. Use onSubmit
Cfreak
Então não funcionará se o JavaScript não estiver disponível. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… sobre coisas que funcionam</a>.
Quentin
1

Você precisa onSubmit. Não onClickde outra forma alguém pode simplesmente pressione enter e ele irá ignorar a sua validação. Quanto ao cancelamento. você precisa retornar falso. Aqui está o código:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

Editar onSubmit pertence à tag do formulário.

Cfreak
fonte
isso não vai funcionar. se os dados são válidos, você não retorna verdadeiro. put return true; no final da função btnClick ()
NickSoft
1

É simples, basta retornar falso;

O código abaixo vai dentro do onclick do botão submit usando jquery ..

if(conditionsNotmet)
{
return false;
}
omar-ali
fonte
0

usar onclick='return btnClick();'

e

function btnClick() {
    return validData();
}
Adão
fonte
2
apertar enter irá ignorar a verificação. Use onSubmit
Cfreak
0
function btnClick() {
    return validData();
}
mbeckish
fonte
1
É necessário fazer mais do que isso para que funcione. Já tentei fazer o functino retornar verdadeiro ou falso e não parece fazer diferença.
Vivian River de
1
A resposta dele está correta. Votado. Você também deve devolvê-lo na tag de entrada
Cfreak
1
Além disso, prefiro usar ev.preventDefault()ou ev.returnValue = falsepara cancelar o comportamento padrão, mas não evitar o surgimento de eventos, caso outros controles observem o mesmo evento no mesmo elemento. Use return falseapenas quando quiser interromper o borbulhamento do evento e cancelar a ação padrão. Veja este artigo .
Klemen Slavič de
Ter que retorná-lo no próprio manipulador de eventos é a principal informação que estava faltando na resposta. Sem isso, a resposta está incompleta e não ajuda o suficiente para valer um voto positivo.
Quentin de
0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>
Pessoa
fonte
2
Para uma resposta útil, essa reação precisa ser ampliada. Explique por que essa é uma resposta à pergunta.
Jeroen Heier
0

Com JQuery é ainda mais simples: funciona em Asp.Net MVC e Asp.Core

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
Tidoy007
fonte