Skip to main content
[Edición eliminada durante el período de gracia]
Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23
Se modifico el codigo para hacerlo mas presentable
Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23
<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>

<script type="text/javascript">
$(document).ready(function() {

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

});
</script>

$(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>

<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>

<script type="text/javascript">
$(document).ready(function() {

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

});
</script>

$(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>

Se modifico en base a la pregunta
Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23

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 (En este caso estoy utilizando JQuery)submit, asi:

<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="EnviarFormularioonclick="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="EnviarFormularioonclick="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="EnviarFormularioonclick="Enviar(this)">Enviar</button>
</form>

<script type="text/javascript">
$(document).ready(function() {

  function EnviarFormularioEnviar(btn) {
    // UsamosUtilizamos parent para referenciarreferirnos al form
    letvar form = $(btn).parent();
    $(form).submit(function(e) {
        e$.preventDefaultajax();{
        $    url:"procesar.ajax({php",
            typemethod: "POST",
            urldataType: 'url.php'"json",
            data: $(this).serialize(),
            success: function(responsedata)
            {
    
           // Agregas el resultado}
            });
       });
      }); 
   }

});
</script>

Una forma que se me ocurre es asignarles a cada button el evento onclick con una funcion general para el formulario (En este caso estoy utilizando JQuery)

<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="EnviarFormulario(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="EnviarFormulario(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="EnviarFormulario(this)">Enviar</button>
</form>

<script type="text/javascript">
$(document).ready(function() {

  function EnviarFormulario(btn) {
    // Usamos parent para referenciar al form
    let form = $(btn).parent();
    $(form).submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'url.php',
            data: $(this).serialize(),
            success: function(response)
            {
              // Agregas el resultado
            }
       });
      });
  }

});
</script>

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:

<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>

<script type="text/javascript">
$(document).ready(function() {

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

});
</script>
Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23
Loading