Enviar un formulario usando jQuery [cerrado]
Quiero enviar un formulario usando jQuery. ¿Alguien puede proporcionar el código, una demostración o un enlace de ejemplo?
Depende de si envía el formulario normalmente o mediante una llamada AJAX. Puede encontrar mucha información en jquery.com , incluida documentación con ejemplos. Para enviar un formulario normalmente, consulte el submit()método en ese sitio. Para AJAX , hay muchas posibilidades diferentes, aunque probablemente quieras usar los métodos ajax()o post(). Tenga en cuenta que post()en realidad es solo una forma conveniente de llamar al ajax()método con una interfaz simplificada y limitada.
Un recurso fundamental, que uso todos los días, que deberías marcar como favorito es Cómo funciona jQuery . Tiene tutoriales sobre el uso de jQuery y la navegación de la izquierda da acceso a toda la documentación.
Ejemplos:
Normal
$('form#myForm').submit();
AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
// ... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
Tenga en cuenta que los métodos ajax()y post()anteriores son equivalentes. Hay parámetros adicionales que puede agregar a la ajax()solicitud para manejar errores, etc.
Tendrás que usar $("#formId").submit().
Generalmente llamarías a esto desde dentro de una función.
Por ejemplo:
<input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$("#formId").submit();
}
</script>
Puede obtener más información sobre esto en el sitio web de Jquery .
cuando tenga un formulario existente, ahora debería funcionar con jquery - ajax/post ahora podría:
- espera en el evento de envío de tu formulario
- evitar la funcionalidad predeterminada de envío
haz tus propias cosas
$(function() { //hang on event of form with id=myform $("#myform").submit(function(e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post', dataType: 'application/json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); });
Tenga en cuenta que, para que la serialize()función funcione en el ejemplo anterior, todos los elementos del formulario deben tener su nameatributo definido.
Ejemplo del formulario:
<form id="myform" method="post" action="http://example.com/do_recieve_request">
<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>
@PtF: los datos se envían mediante POST en este ejemplo, por lo que esto significa que puede acceder a sus datos a través de
$_POST['dataproperty1']
, donde dataproperty1 es un "nombre de variable" en su archivo json.
Aquí muestra la sintaxis si usa CodeIgniter:
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
En jQuery preferiría lo siguiente:
$("#form-id").submit()
Pero, de nuevo, realmente no necesitas jQuery para realizar esa tarea; solo usa JavaScript normal:
document.getElementById("form-id").submit()
