enviar formulario al hacer clic en evento usando jquery

¿Puede alguien decir por qué ninguna de estas opciones presentará el formulario? Estoy tratando de hacer algo más complicado, pero he pasado por agua que reduce a esto para tratar de averiguar por qué me parece que no puede conseguir este formulario para enviar utilizando un evento de clic y enviar()enviar formulario al hacer clic en evento usando jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#submitButton').click(function(e) { 
     e.preventDefault(); 
     $("#testForm").submit(); 
    }); 

    $('#submitLink').click(function(e) { 
     e.preventDefault(); 
     $("#testForm").submit(); 
    }); 
}); 
</script> 
</head> 

<body> 
<form action="javascript:alert('submitted');" method="post" id="testForm"> 
    <label>Name</label> 
    <input type="text" name="name" value="" /> 
    <input type="submit" name="submit" value="Submit" id="submitButton" /> 
    <p><a href="#" id="submitLink">Submit Form</a></p> 
</form> 

</body> 
</html>

Gracias !

Fuente

2011-06-09 MatthewLee

Si tiene una acción de formulario y un tipo de entrada = enviar dentro de etiquetas de formulario, va a enviar la forma antigua y, básicamente, actualizar la página. Al realizar transacciones de tipo AJAX, este no es el efecto deseado.

Elimina la acción. O elimine el formulario por completo, aunque en algunos casos es útil serializarlo para reducir su carga de trabajo. Si las etiquetas de formulario permanecen, mueva el botón fuera de las etiquetas de formulario o, alternativamente, conviértalo en un enlace con un control onclick o clic en lugar de un botón de entrada. Los botones Jquery UI funcionan muy bien en este caso porque puede imitar un botón de entrada con un elemento de etiqueta a.

Fuente

2011-06-09 21:26:53 bpeterson76

La acción es sólo algo que estaba usando para poner a prueba para ver si la forma se somete, lo que no lo era. En mi código actual no estoy haciendo una transacción de tipo AJAX, estoy enviando el formulario al servidor y procesándolo con php. Pero antes de que se procese, estoy usando la API de Facebook para ver si el usuario también desea enviar su publicación a su muro de Facebook. Entonces, en efecto, necesito darles tiempo para responder antes de enviar. Lo extraño con los dos ejemplos que tengo arriba es que ninguno de los dos envía el formulario, lo cual no tiene sentido para mí. – MatthewLee

Me imagino que sería más fácil hacer el control de Facebook en el lado del servidor justo antes del envío del formulario, y luego devolver falso si la acción deseada no se envía. – bpeterson76

Ok, ahora lo entiendo, el botón de enviar dentro de las etiquetas de formulario lo estaba rompiendo para ambas opciones. Cuando elimino el botón de enviar, el enlace funciona como se esperaba. Gracias bpetersen! – MatthewLee

¿Necesita publicar el formulario en una URL o solo necesita detectar el evento de envío? Debido a que puede detectar el evento presentará añadiendo onsubmit="javascript:alert('I do also submit');"

<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>

No estoy seguro de que esto es lo que busca sin embargo.

Fuente

2011-06-09 21:26:53 tomahaug

Gracias por la idea de Henrik, pero realmente quiero enviar el formulario – MatthewLee

es porque el nombre del botón de envío se llama "enviar", cámbielo a cualquier cosa que no sea "enviar", intente con "enviarme" y vuelva a intentarlo. Entonces debería funcionar.

Fuente

2011-06-09 21:30:08

Respuesta excelente y pura. ¡¡¡Estupendo!!! Gracias. – 23W

espera, ¿qué? ¿por qué? ... editar: [aquí está el por qué] (http://stackoverflow.com/questions/3571328/form-submit-button-will-not-submit-when-name-of-button-is-submit). ¡Gracias! – Sam

¿Por qué no utilizar el botón enviar para ejecutar el código que desea? Si su función devuelve falso, cancelará el envío.

$("#testForm").submit(function() { 
    /* Do Something */ 
    return false; 
});

Fuente

2011-06-09 21:31:16 MillsJROSS

Usando el botón jQuery clic

$('#button_id').on('click',function(){ 
    $('#form_id').submit(); 
});

Fuente

2015-06-10 22:14:44

enviar formulario al hacer clic en evento usando jquery

Respuesta

Cuestiones relacionadas