Sigo recibiendo entradas duplicadas en mi base de datos debido a usuarios impacientes que hacen clic en el botón de enviar varias veces.¿Cómo puedo evitar una doble presentación con jQuery o Javascript?
Busqué en Google y encontré algunas secuencias de comandos, pero ninguna de ellas parece ser suficiente.
¿Cómo puedo evitar que estas entradas duplicadas ocurran usando javascript o preferiblemente jQuery?
¡Gracias por adelantado!
¿Qué le parece deshabilitar el botón al enviar? Eso es lo que hago. Funciona bien.
$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
responsabilidad:
Esto sólo funciona cuando JavaScript está habilitado en el navegador del usuario. Si los datos que se envían son críticos (como la compra con tarjeta de crédito), considere mi solución como la primera línea de defensa. Sin embargo, para muchos casos de uso, deshabilitar el botón de enviar proporcionará suficiente prevención.
Implementaré esta solución solo de javascript primero. A continuación, realice un seguimiento de cuántos registros duplicados todavía se están creando. Si es cero (o lo suficientemente bajo como para no importarle), entonces ha terminado. Si es demasiado alto para usted, implemente una verificación de base de datos de back-end para un registro existente.
Esto debería hacer el truco:
$("form").submit(function() {
$(":submit", this).attr("disabled", "disabled");
});
Sin jQuery?
Como alternativa, puede hacer una comprobación desde db para verificar si ya existe un registro y, de ser así, no inserte uno nuevo.
tengo una pieza única de datos que puedo comprobar, cada id_number es único, ¿cómo iba a ir sobre la implementación de un cheque como ¿ese? – Odyss3us
Aquí hay un poco de jQuery que utilizo para evitar el problema del doble clic. Solo permitirá un clic en el botón de enviar.
$(document).ready(function() {
$("#submit").one('click', function() {
});
});
La prevención de la publicación doble no es tan simple como deshabilitar el botón enviar. Hay otros elementos que pueden presentar es:
Usando contenedor de datos jQuery sería mi elección. He aquí un ejemplo:
$('#someForm').submit(function(){
$this = $(this);
/** prevent double posting */
if ($this.data().isSubmitted) {
return false;
}
/** do some processing */
/** mark the form as processed, so we will not process it again */
$this.data().isSubmitted = true;
return true;
});
Una técnica que he visto utilizado es el de asignar un identificador único a cada forma que se abrió, y sólo aceptará un envío por formulario basado en la ID.
También significa que puede verificar cuántas veces las personas no se molestan en enviarlas, y puede verificar si el envío proviene realmente de su formulario al verificar si tiene una identificación que creó su servidor.
Sé que usted solicitó una solución de javascript, pero personalmente haría ambas cosas si necesitara la solidez.
Para aplicaciones de misión crítica que implican la transferencia de dinero, esta es realmente la mejor manera de hacerlo. –
El problema con el método descrito here es que si está utilizando un marco de validación de JavaScript y la validación falla, no podrá corregir y volver a enviar el formulario sin actualizar la página.
Para resolver esto, debe conectarse al evento de éxito de su marco de validación y solo entonces, establezca el control de envío como deshabilitado. Con Parsley, se puede conectar en el evento de formulario validado con el siguiente código:
$.listen('parsley:form:validated', function(e){
if (e.validationResult) {
/* Validation has passed, prevent double form submissions */
$('button[type=submit]').attr('disabled', 'disabled');
}
});
Si está utilizando la validación del lado del cliente y desea permitir adicional enviar intentos si los datos no es válido, puede no permitir sólo cuando somete el contenido del formulario es el mismo:
var submittedFormContent = null;
$('#myForm').submit(function (e) {
var newFormContent = $(this).serialize();
if (submittedFormContent === newFormContent)
e.preventDefault(true);
else
submittedFormContent = newFormContent;
});
no estoy seguro de qué idioma/marco que está trabajando o si es sólo HTML puro. Pero en una aplicación de Rails que escribí pasé un atributo de datos en el botón de formulario disable_with que evita que se pueda hacer clic en el botón más de una vez mientras la transacción está en proceso.
Esto es lo que parece el ERB.
<%= f.button "Log In", class: 'btn btn-large btn-block btn-primary', data: {disable_with: "<i class='icon-spinner'></i>Logging In..."} %>
Esto es lo que me ocurrió en https://github.com/liberapay/liberapay.com/pull/875:
$('form').on('submit', function (e) {
var $form = $(this);
// Check that the form hasn't already been submitted
if ($form.data('js-submit-disable')) {
e.preventDefault();
return false;
}
// Prevent submitting again
$form.data('js-submit-disable', true);
// Set a timer to disable inputs for visual feedback
var $inputs = $form.find(':not(:disabled)');
setTimeout(function() { $inputs.prop('disabled', true); }, 100);
// Unlock if the user comes back to the page
$(window).on('focus pageshow', function() {
$form.data('js-submit-disable', false);
$inputs.prop('disabled', false);
});
});
Lo intentaré, gracias. – Odyss3us
Javascript es solo parte de la solución aquí, también debe verificar la base de datos para verificar si se ingresaron datos recientemente. Si tiene un dato único, puede verificar que es la mejor manera, pero otro método es tener una marca de tiempo en los datos y verificar si ese usuario ha agregado algo en un corto período de tiempo. Sin embargo, esto dependerá de la aplicación sobre qué es lo que está agregando. – dnolan
Tengo un único dato que puedo verificar, cada id_number es único, ¿cómo podría implementar un cheque como ese? – Odyss3us