0

Estimados tengo la siguiente consulta, ya que es la primera ves que me presento con este escenario. Tengo un formulario que se repite tantas veces como productos existan, obviamente los datos del formulario cambian dependiendo del producto, pero la estructura es la misma para todos. El cual está de la síguiente forma.

<form class="form-data">
 <h4>Producto N°1</h4>
 <img src="producto1.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10001"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>
<form class="form-data">
 <h4>Producto N°2</h4>
 <img src="producto2.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10002"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>
<form class="form-data">
 <h4>Producto N°3</h4>
 <img src="producto3.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10003"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>

Los datos los estoy intentado enviar de la siguiente forma

<script>
$(document).ready(function(){
    $(document).on('click', 'btn_enviar', function() {
         Enviar();
} );

});
function Enviar(){
        var action = 'fetch_data' ;
        var sku = document.getElementsByClassName('sku').value;
        $.ajax({
            url:"procesar.php",
            method: "POST",
            dataType: "json",
            data:{action:action, sku:sku},
            success:function(data){
 
            }
        });
}
</script>

Ademas de este archivo tiene que tener un archivo que procese la petición ajax, est Lo que quiero es enviar por ajax el valor del input sku, pero dependiendo del botón en el que aga click, osea si corresponde el primer o segundo formulario, y así sucesivamente, para luego realizar algunas operaciones con php, se como usar ajax, pero no como poder enviar el dato que necesito, quedo atento a su ayuda. Gracias.

4
  • Siii eso lo se, pero me refiero a como enviar el dato del formulario al cual estoy haciendo referencia, ya que solo consigo enviar el dato del primer formulario, independientemente de en que botón haga click Commented el 19 nov. 2020 a las 13:48
  • Los creo de forma dinámica con una consulta a la base de datos, los datos son de prueba por eso los valores y nombres. No tengo problemas en generar la consulta y mostrar los formularios, pero si con enviar los datos. Commented el 19 nov. 2020 a las 13:51
  • Saludos. Incluye el código de como estas actualmente haciéndolo; se me ocurre usas $('form [class=form-data]').serialize() pero para no errar tanto en la sugerencia deseable coloques tu código. Commented el 19 nov. 2020 a las 13:57
  • Pregunta editada, de esa forma estoy intentado enviar los datos actualmente. Commented el 19 nov. 2020 a las 14:25

2 respuestas 2

0

Una forma que se me ocurre es asignarles a cada button el evento onclick con una funcion general para el formulario donde se hara el submit, asi:

$(document).ready(function() {
   function Enviar(btn) {
      // Utilizamos parent para referirnos al form
      var form = $(btn).parent();
      $(form).submit(function(e) {
         e.preventDefault();
         $.ajax({
            url: "procesar.php",
            method: "POST",
            dataType: "json",
            data: $(this).serialize(),
            success: function(data) {

            }
         });
      });
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-data">
   <h4>Producto N°1</h4>
   <img src="producto1.jpg"/>
   <p>Descripción producto </p>
   <input type="text" name="sku" value="10001"/>
   <button type="submit" onclick="Enviar(this)">Enviar</button>
</form>
<form class="form-data">
   <h4>Producto N°2</h4>
   <img src="producto2.jpg"/>
   <p>Descripción producto </p>
   <input type="text" name="sku" value="10002"/>
   <button type="submit" onclick="Enviar(this)">Enviar</button>
</form>
<form class="form-data">
   <h4>Producto N°3</h4>
   <img src="producto3.jpg"/>
   <p>Descripción producto </p>
   <input type="text" name="sku" value="10003"/>
   <button type="submit" onclick="Enviar(this)">Enviar</button>
</form>

0

Veo tienes el $(document).ready; por tanto usas jQuery; en base a esto te sugiero lo siguiente:

// Usando jQuery

function btnEnviar(btnCliqueado) {
  // Buscamos en los TAG padres del boton el primer FORM
  var elForm=$(btnCliqueado).closest('form');
  var action = 'fetch_data' ;
  // Buscamos dentro del FORM antes obtenido el elemento cuyo nombre sea sku
  var sku = $('input[name=sku]', elForm).val(); // document.getElementsByClassName('sku').value;
  alert(sku); // Mostramos el valor obtenido.
  /*
  // Deshabilito la petición Ajax que no aplica,
  $.ajax({
     url:"procesar.php",
     method: "POST",
     dataType: "json",
     data:{action:action, sku:sku},
     success:function(data){
     }
  });
  */
} // btnEnviar

$(
function () {
  //Asignamos a los botones la funcion
  $('button').click(function () {
    btnEnviar(this);
  });
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-data">
 <h4>Producto N°1</h4>
 <img src="producto1.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10001"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>
<form class="form-data">
 <h4>Producto N°2</h4>
 <img src="producto2.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10002"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>
<form class="form-data">
 <h4>Producto N°3</h4>
 <img src="producto3.jpg"/>
 <p>Descripción producto </p>
 <input type="text" name="sku" value="10003"/>
 <button type="button" class="btn_enviar">Enviar</button>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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