¿Cómo puedo cancelar el envío del formulario en el botón Enviar evento onclick?

Question

Estoy trabajando en una aplicación web ASP.net.

Tengo un formulario con un botón Enviar. El código para el botón Enviar se parece al <input type='submit' value='submit request' onclick='btnClick();'>.

Quiero escribir algo como lo siguiente:

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

¿Cómo se hace esto?

Answer 1

Usted es mejor hacer ...

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

Si isValidForm() vuelve false, a continuación, su forma no presentara.

Probablemente también deba mover su controlador de eventos desde la línea.

document.getElementById('my-form').onsubmit = function() { 
    return isValidForm(); 
}; 

Answer 2

uso onclick='return btnClick();'

y

function btnClick() { 
    return validData(); 
} 

Answer 3

function btnClick() { 
    return validData(); 
} 

Answer 4

Es necesario cambiar

onclick='btnClick();' 

a

onclick='return btnClick();' 

y

cancelFormSubmission(); 

a

return false; 

Dicho esto, me gustaría tratar de evitar los atributos de eventos intrínsecos a favor de unobtrusive JS con una biblioteca (como YUI o jQuery) que tiene un buen evento manejar la API y vincularse al evento que realmente importa (es decir, el evento de envío del formulario en lugar del evento de clic del botón).

Answer 5

Cambiar la entrada a este:

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

y regresar falsa en su función

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

Answer 6

Por qué no cambia el botón de enviar a un botón regular, y en el evento de clic, enviar el formulario si pasa tus pruebas de validación?

por ejemplo

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

function btnClick() { 
    if (validData()) 
     document.myform.submit(); 
} 

Answer 7

Usted necesita onSubmit. No onClick de lo contrario, alguien puede presionar enter y omitirá su validación. En cuanto a la cancelación. necesitas devolver falso. Aquí está el código:

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

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

Editar onSubmit pertenece a la etiqueta de formulario.

Answer 8

Necesitas return false;:

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

function btnClick() { 
    return validData(); 
} 

Answer 9

debe cambiar el tipo de submit a button:

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

en lugar de

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

a continuación, obtener el nombre de su botón en javascript y asociar cualquier acción que desea que

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

trabajó para mí espero que ayude.

Answer 10

Es simple, solo devuelve falso;

El código siguiente pasa dentro del onclick del botón de enviar usando jQuery ..

if(conditionsNotmet) 
{ 
return false; 
} 

Answer 11

veces onsubmit no quiere trabajar con asp.net.

Lo resolví de una manera muy fácil.

si tenemos una forma tal

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

Ahora puede coger conseguir ese caso, antes de la forma de devolución de datos y evitar que la devolución de datos y hacer todo el Ajax desea utilizar este jQuery.

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