Foros del Web » Programando para Internet » Javascript »

Desactiva "Submit"

Estas en el tema de Desactiva "Submit" en el foro de Javascript en Foros del Web. Hola buenos dias, tengo el siguiente problema Tengo un formulario de registro q por medio de un js recoge los datos, los envia a un ...
  #1 (permalink)  
Antiguo 12/07/2018, 10:52
 
Fecha de Ingreso: marzo-2004
Mensajes: 176
Antigüedad: 14 años, 8 meses
Puntos: 1
Desactiva "Submit"

Hola buenos dias, tengo el siguiente problema
Tengo un formulario de registro q por medio de un js recoge los datos, los envia a un php q almacena la información en una base de datos y al finalizar de registrarse vuelve y recarga la pagina del formulario vacio para q el usuario cree otro registro.
El problema q hay es q si se demora en almacenar en la bd y usuario sigue dando en aceptar y oobviamente repite el registro y pues pone mas lento el sistema,
como hacer para q al hacer click le muestre al usuario q se esta registrando, como un relojito o algo asi, y que mientras eso pasa no puede hacer click de nuevo en aceptar.
lo q tengo en codigo es esto:
archivo formulario
Código:
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script>
	$(document).ready(function() {
	function obtener_datos(id){
		$.ajax({
			url: "formulario.php",
			success: function(data){
				$("#mainformulario").html(data);
			}})
}
								
$(document).on("click","#nregistro",function(){
var id_add = $("#id_add").text();
var tipo_add = $("#tipo_add").val();
var nombre_add = $("#nombre_add").text();
var color_add = $("#color_add").val();
var ancho_add = $("#ancho_add").val();
var valor_add = $("#valor_add").val();
var tamano_add = $("#tamano_add").val();
$.ajax({
                    url: "insertar.php",
                    method: "POST",
                    data: {
                    	id: id_add,
                    	nombre:nombre_add,
			tipo:tipo_add,
			tamano:tamano_add,
			ancho:ancho_add,
			valor:valor_add,
			color:color_add
			},
			success: function(data){
			obtener_datos();
			}
})
   })
Basicamente la primera parte lo q dice es q en el div "mainformulario" cargue el formulario.php y la segunda parte dice q al hacer click en el boton "nregistro" recoja las variables las envie a insertar.php y alli guarde en la bd los datos.

Gracias por su colaboracion
  #2 (permalink)  
Antiguo 12/07/2018, 11:21
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 865
Antigüedad: 12 años, 1 mes
Puntos: 32
Respuesta: Desactiva "Submit"

Hola, mira si esto te puede funcionar.

Código:
var parametros = {
	"valor1" : valor1,
	"valor2" : valor2,
	"valor3" : valor3
};
$.ajax({
	data:  parametros,
	url:   '/formulario.php',
	type:  'post',
	beforeSend: function () {
		$("#fondo_negro").fadeIn(100)
		$("#div_rejoj").fadeIn(100)
	},
	success:  function (response) {
		$("#fondo_negro").fadeOut(100)
		$("#div_rejoj").fadeOut(100)
		
		//Ejecutar código 
	}
});
Creas un div con posición fixed que ocupe toda la pantalla y traslúcido encima de todo, asi evitará que le den al botón.
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #3 (permalink)  
Antiguo 14/07/2018, 02:27
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 1 mes
Puntos: 928
Respuesta: Desactiva "Submit"

También puedes deshabilitar el botón de envío luego de haberlo pulsado una vez y lo volverías a habilitar cuando se haya completado la petición. Solo necesitas trabajar con el atributo disabled.

Código Javascript:
Ver original
  1. //...
  2.  
  3. $("#nregistro").prop("disabled", true); //Deshabilitado
  4.  
  5. $.ajax({
  6.     //...
  7.     success: {
  8.         $("#nregistro").prop("disabled", false); //Habilitado
  9.         //...
  10.     }
  11. });

__________________
«Laissez faire et laissez passer, le monde va de lui même»



La zona horaria es GMT -6. Ahora son las 19:52.