Desactivación de un botón de envío después de un clic

Question

Aquí está mi código:

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'> 
</form> 

Quiero que mi función onsubmit a ser ejecutado y quiero que la página sea submited. En mi sitio web, sin presentar ninguna función de

He intentado duplicar aquí, pero la forma parece ser publicado y mi función nunca es ejecutado ... http://jsfiddle.net/V7B3T/1/

y no me saber cuando debería reactivar el botón.

¿Debo hacerlo en el documento listo, o en la función de enviar?

Así que si alguien puede arreglar el violín :) y después de eso lo compararé con mi código. creo: S Estoy perdido

Gracias a todos

Answer 1

Si desea validar la forma o realizar ningún cambio en el antes de enviar y sólo presentar si el formulario es válido que puede hacer algo como esto:

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data"> 
    <input type="submit" name="send" id="send" value="Send" title="test"> 
</form> 

y el código JavaScript:

$('#frm').bind('submit', function (e) { 
    var button = $('#send'); 

    // Disable the submit button while evaluating if the form should be submitted 
    button.prop('disabled', true); 

    var valid = true;  

    // Do stuff (validations, etc) here and set 
    // "valid" to false if the validation fails 

    if (!valid) { 
     // Prevent form from submitting if validation failed 
     e.preventDefault(); 

     // Reactivate the button if the form was not submitted 
     button.prop('disabled', false); 
    } 
}); 

Aquí hay un fiddle que funciona.

Answer 2

Si no desea enviar la página esto debe hacer el truco:

onclick="this.disabled=true;return false;" 

Answer 3

sin duda mover ese código para externa JS (CSS) y los archivos que le corresponde, pero esto debería funcionar:

onclick="this.disabled=true;this.parentNode.submit();" 

Puesto que usted está desactivando el botón de enviar onclick se desactivará una vez que la forma real submissi al hacer clic se lleva a cabo (el clic ocurre antes de eso). Sin embargo, enviar el formulario con JS debería ser el truco.

http://jsfiddle.net/V7B3T/4/

Editar: En cuanto a volver a habilitar el botón, que tendría que suceder después de que su función se ha quedado OnSubmit() supongo.

Answer 4

Si su formulario hace una devolución de datos, efectivamente está cambiando la página, y por lo tanto no tendrá que preocuparse por volver a habilitar su botón (eso sucederá una vez que la página se haya cargado).

Además, como está utilizando jQuery, también puede usarlo correctamente y separar el código HTML y Javascript asociando los manejadores de eventos utilizando las funciones jQuery, y no los atributos onclick, onsubmit, etc. en los elementos HTML.

actualiza HTML:

<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' value='Send' title='test'> 
</form> 

Actualizado Javascript:

function submitForm(form) { 
    alert("submitted"); 
} 

$('#send').click(function(e) { 
    this.disabled = true; 
}); 

$('#frm').submit(function(e) { 
    submitForm(this);  
}); 

Working jsFiddle

que necesitará para envolver que en una llamada $(document).ready(function() {...}); para su uso en una página real - lo dejé out porque jsFiddle ejecuta cualquier Javascript provisto onLoad de todos modos.