¿Cómo se cancela el envío de formularios en el botón de enviar onclick evento?

Question

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

Tengo un formulario con un botón de envío. El código para el presente miradas botón <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 se vuelve a isValidForm() false, a continuación, su forma no presentara.

También debe probablemente mueva el controlador de eventos en línea.

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

Answer 2

Cambiar su entrada a este:

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

Y falsa de retorno en su función

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

Answer 3

Es necesario cambiar

onclick='btnClick();'

a

onclick='return btnClick();'

y

cancelFormSubmission();

a

return false;

Una vez dicho esto, que iba a tratar de evitar los atributos de eventos intrínsecos a favor de la discreta JS con una biblioteca (como YUI o jQuery) que tiene un evento de buen manejo de activos y de lazo en el caso de que realmente importa (es decir, los formularios de presentar evento en lugar de evento de clic del botón).

Answer 4

A veces onsubmit no funcionaría con asp.net.

Lo resuelto con forma 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 que desee mediante este jQuery.

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

Answer 5

se 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(){...};

funcionado para mí espero que ayude.

Answer 6

Es necesario return false;:

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

function btnClick() {
    return validData();
}

Answer 7

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

por ejemplo

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

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

Answer 8

Es muy sencillo, simplemente return false;

El código va a continuación dentro del onclick de la presente usando jQuery botón ..

if(conditionsNotmet)
{
return false;
}

Answer 9

uso onclick='return btnClick();'

y

function btnClick() {
    return validData();
}

Answer 10

function btnClick() {
    return validData();
}

Answer 11

Es necesario onSubmit. No onClick otra manera alguien puede entrar simplemente pulse y pasará por alto su validación. En cuanto a la cancelación. necesita devolver falsa. Aquí está el código:

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

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

Editar onSubmit pertenece en la etiqueta de formulario.

Answer 12

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>