Tengo varios formularios que intento gestionar con AJAX jQuery. Quiero minimizar el código que uso, así que intento emplear una misma función AJAX para todos los formularios, pero no me sale. Aquí va lo que llevo:
Código HTML:
<form id="mi_forma_1"> <input type="hidden" name="forma" value="mi_forma_1" /> <input type="submit" value="Enviar" id="1" /> </form> <form id="mi_forma_2"> <input type="hidden" name="forma" value="mi_forma_2" /> <input type="submit" value="Enviar" id="2" /> </form>
Código Javascript:
Ver original
id_formulario = null; $("input:submit").click(function(e){ e.preventDefault(); id_del_submit = $(this).attr('id'); // Lo cual obtiene "1" o "2" id_formulario = '"#mi_forma_'+id_del_submit+'"'; }); $(id_formulario).on("submit", function(e) { e.preventDefault(); var datos = $(id_formulario).serializeArray(); $.ajax({ type: "POST", dataType: "json", url: "process.php", data: datos, success: function(response) { $("#mensaje").text( response.statusResponse ); }, complete: function(jqXHR, estado, error) { if (estado == "parsererror") { $("#mensaje").text( estado ); } } }); });
Resultado: No pasa nada! Al hacer click al submit no se ejecuta AJAX. He realizado ya varias pruebas y veo que la variable id_formulario contiene la cadena "#mi_forma_1" o "#mi_forma_2".
¿Por qué AJAX nunca se ejecuta? Por lo que se ve, la línea
Código Javascript:
no reconoce el valor de id_formulario .Ver original
$(id_formulario).on("submit", function(e) {
¿Cómo solucionar esto?
Saludos!