Desactiva "Submit"

[cabeto_1972]

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

[gogupe]

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.

[Alexis88]

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:

//...
 
$("#nregistro").prop("disabled", true); //Deshabilitado
 
$.ajax({
    //...
    success: {
        $("#nregistro").prop("disabled", false); //Habilitado
        //...
    }
});