formulario de envío jQuery AJAX
Tengo un formulario con nombre orderproductFormy un número indefinido de entradas.
Quiero hacer algún tipo de jQuery.get o ajax o algo así que llame a una página a través de Ajax y envíe todas las entradas del formulario orderproductForm.
Supongo que una forma sería hacer algo como
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
Sin embargo, no sé exactamente todas las entradas del formulario. ¿Existe alguna característica, función o algo que simplemente envíe TODAS las entradas del formulario?
Esta es una referencia sencilla:
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var actionUrl = form.attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
Puede utilizar las funciones ajaxForm/ajaxSubmit del complemento Ajax Form o la función serializar jQuery.
Forma Ajax :
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
o
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
ajaxForm se enviará cuando se presione el botón enviar. ajaxSubmit envía inmediatamente.
Serializar :
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
La documentación de serialización de AJAX está aquí .
Otra solución similar que utiliza atributos definidos en el elemento del formulario:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
Hay algunas cosas que debes tener en cuenta.
1. Hay varias formas de enviar un formulario.
- usando el botón enviar
- presionando enter
- activando un evento de envío en JavaScript
- posiblemente más dependiendo del dispositivo o dispositivo futuro.
Por lo tanto, debemos vincularnos al evento de envío del formulario , no al evento de clic del botón. Esto garantizará que nuestro código funcione en todos los dispositivos y tecnologías de asistencia ahora y en el futuro.
2. hijax
Es posible que el usuario no tenga habilitado JavaScript. Un patrón hijax es bueno aquí, donde tomamos suavemente el control del formulario usando JavaScript, pero lo dejamos enviado si JavaScript falla.
Deberíamos extraer la URL y el método del formulario, de modo que si el HTML cambia, no necesitamos actualizar JavaScript.
3. JavaScript discreto
Usar event.preventDefault() en lugar de devolver false es una buena práctica, ya que permite que el evento se desarrolle. Esto permite que otros scripts se vinculen con el evento, por ejemplo, scripts de análisis que pueden monitorear las interacciones del usuario.
Velocidad
Lo ideal sería utilizar un script externo, en lugar de insertar nuestro script en línea. Podemos vincularlo en la sección principal de la página usando una etiqueta de secuencia de comandos, o vincularlo en la parte inferior de la página para mayor velocidad. El script debe mejorar silenciosamente la experiencia del usuario, no estorbar.
Código
Suponiendo que está de acuerdo con todo lo anterior y desea detectar el evento de envío y manejarlo mediante AJAX (un patrón hijax), podría hacer algo como esto:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
Puedes activar manualmente el envío de un formulario cuando lo desees a través de JavaScript usando algo como:
$(function() {
$('form.my_form').trigger('submit');
});
Editar:
Recientemente tuve que hacer esto y terminé escribiendo un complemento.
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
Agregue un atributo de envío automático de datos a su etiqueta de formulario y luego podrá hacer esto:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
js
$(function() {
$('form[data-autosubmit]').autosubmit();
});
