2

Tengo 10 formularios dinamicos, para identificarlos les coloque un contador que va desde 1 - 10 dependiendo de los formularios que esten creados en la base de datos.

¿cómo puedo hacer para que se me envie 1 de esos formularios solamente al momento de darle submit?

lo he intentado y jquery me cuenta los 10 formularios y me envia la misma informacion 10 veces (dependiendo de la cantidad de formularios creados)

$('form').submit(function(e){
      e.preventDefault();
      var data = $(this).serializeArray();
}
2
  • 4
    Voto para cerrar esta pregunta como tema no relacionado porque no se añade el código necesario para establecer el escenario en el que ocurre el problema o dar una solución Commented el 16 nov. 2017 a las 14:13
  • Hola @Avancini1. El código que publicaste se dispara para un único form, no para los 10. El error debe estar en otro lado, pero sin el resto del código, es imposible verlo... ¿Cerraste el ) que falta en tu pregunta, no?
    – Mariano
    Commented el 28 nov. 2017 a las 6:52

2 respuestas 2

1

Tú puedes escuchar los clics del elemento button en específico y dentro de él determinar mediante $(this).closest('form'); a qué formulario está ligado el botón que fue presionado.

De ese modo trabajarás con ese único formulario.

Ejemplo con tres formularios... pero pueden ser 10, o más, o menos.

$(function() {
  $('button').on('click', function(e) {
    e.preventDefault();

    var frm = $(this).closest('form');
    var data = frm.serialize(); //Almacenamos los elementos del form
    console.log(data);

    alert('Enviaste el formulario con id: '+frm.prop('id'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="frm1">
  Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm1" />
  <button>Enviar frm1</button>
</form>

<hr />

<form id="frm2">
  Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm2" />
  <button>Enviar frm2</button>
</form>

<hr />

<form id="frm3">
  Escriba datos: <input type="text" name="inputTest" placeholder="Escribe algo en frm3" />
  <button>Enviar frm3</button>
</form>

Si es para enviarlo a Ajax, puedes tener otra función que envíe las peticiones a Ajax, y desde dentro del on.click recoges el formulario y se lo pasas a esa función.

Para hacer el código más fléxible, puedes dotar a cada formulario de un atributo action donde colocarías el archivo que quieres invocar en la petición Ajax y un atributo method. Luego usas prop del objeto formulario para saber a qué archivo debe enviarse según el formulario que sea.

La función que haría la petición Ajax sería más o menos:

function enviarAjax(frm) 
{
    var data=frm.serialize();
    var request = $.ajax
        ({
            url:      frm.prop('action'),    //Lo toma del form
            method:   frm.prop('method'),   //Lo toma del form
            data:     data,
            dataType: 'html' //o 'json' ...
        });

        request.done(function( msg ) 
        {
            console.log(msg);
            return msg; //En caso de que sea necesario manejar los reusltados

        });

        request.fail(function( jqXHR, textStatus ) 
        {
            alert( 'Error en la petición: ' + textStatus );
            var msg={error: textStatus};
            return msg;
        });

}

Y el código del on.click sería casi igual, sólo incluiría la llamada a este método:

  $('button').on('click', function(e) {
    e.preventDefault();

    var frm = $(this).closest('form');
    var data = enviarAjax(frm); //Aquí se recibe data desde el return de la función
    console.log(data);

    alert('Enviaste el formulario con id: '+frm.prop('id'));
  });

Nota: Todo el código debería ir dentro de un bloque $(function() { ... });

2
  • No entiendo el por qué de la recomendación del cambio de evento. Cada evento onSubmit se dispara para un único form. Sin embargo, en esta respuesta, pareciera como que dijeras que no puede hacerlo como lo está intentando y que tiene que cambiarlo al onClick del botón.
    – Mariano
    Commented el 28 nov. 2017 a las 6:50
  • @Mariano simple he expuesto una manera de hacerlo que para mí es mejor (por la experiencia que tengo en este tipo de casos). En mi opinión es más certero escuchar por el botón que se presiona, porque particularmente he tenido problemas con el ok submit. De todos modos, puedes enriquecer esta pregunta aportando una respuesta basada en lo que dices en tu comentario.
    – A. Cedano
    Commented el 28 nov. 2017 a las 9:17
0

Listoooooo

    <a style="cursor: pointer;" onclick="agregar();"> 
                    <i class="fa fa-plus"></i> <span>Agregar</span>
                  </a>

function agregar(){
var data = $(this).serializeArray();
    $.ajax({
        url:   'index.php?parametro=data',
            type:  'post',
        success:  function (data) {

        },
    });
}


<form>
input
input
<button type="submit" class="btn btn-success pull-right" name="Datos[tipo]" value="1" onclick="agregar();">Guardar</button>
</form>

function agregar(){
var data = $(this).serializeArray();
    $.ajax({
        url:   'index.php?parametro=data',
            type:  'post',
        success:  function (data) {

        },
    });
}

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.