Comment obtenir l'ID de formulaire soumis à partir de nombreux formulaires générés dynamiquement à l'aide de jQuery sur la page JS

Lorsqu'un utilisateur clique sur le bouton Ajouter (Ajouter au panier), le formulaire parent de ce bouton sera soumis car vous utilisez Ajouter . La propriété type = "submit" est utilisée pour une soumission de formulaire. Si vous avez plusieurs formulaires, utilisez jQuery pour obtenir des éléments de formulaire soumis comme celui-ci-

var id = '';
$(function() {
  $("form").submit(function(e) {
    e.preventDefault(); // prevent default submit behaviour
    var form = $(this);
    id = form.attr('id');
    var hdn_prodpkid = $("#id #hdn_prodpkid").val();
    $.ajax({
      url: "./product_addtocart_p.php",
      type: "POST",
      data: {
        hdn_prodpkid: hdn_prodpkid
      },
      cache: false,
    }) // End of Ajax
  }); // End of form submit
}); // End of $(function()) 

Lorsqu'un formulaire est soumis à partir de votre fichier product_listing.php le code ci-dessus s'exécutera et récupérera l'ID de ce formulaire soumis.

Après cela, vous pouvez exécuter votre ajax pour un autre calcul sur le fichier product_listing.js .

- Mettre à jour--

essayez d'utiliser l'exemple ci-dessous

$(document).ready(function() {

var id; //For global access

$("form").submit(function(){
  var form = $(this);
   id = form.attr('id');

  $("#"+id+" input, #"+id+" select").jqBootstrapValidation({

    preventSubmit: true,
    submitError: function($form, event, errors) {
        ...other code...
    },

    submitSuccess: function($form, event) {
    event.preventDefault();
    var hdn_prodpkid = $("input#hdn_prodpkid").val();
    ... other variables...

        $.ajax({
            url: "./product_addtocart_p.php",
            type: "POST",
            data: {
            hdn_prodpkid: hdn_prodpkid,
            ... other variables...

        },
        cache: false,

        success: function(data) 
        {
            ...other code...
        }
    }
  });
});
});

alert(id);

Maintenant, j'ai défini la variable id en dehors de la fonction afin que vous puissiez y accéder en dehors la fonction.

J'espère que cela fonctionnera ...

--Mettre à jour--

Je ne suis pas en mesure de reproduire votre code fourni donc je vous suggère seulement comment gérer ce problème. Tout d'abord, simplifiez votre code et vérifiez quel code fonctionne ou quel code ne fonctionne pas, après cela, vous devez vérifier pourquoi ce code ne fonctionne pas.

Si possible, simplifiez votre code qui pourrait vous donner un indice pourquoi votre code ne fonctionne pas. J'ai simplifié votre code Si possible, utilisez le code simplifié.

Merci

Votre product_listing.js

$("form").submit(function(){
  var form = $(this);
  var id = form.attr('id');
  alert(id + ' form submitted');
});

veuillez trouver les modifications en espérant que cela fonctionne

1. Tout d'abord mettre à jour, le code du bouton dont l'id est répété n'est pas valide

2. déclenche l'événement de clic du bouton par classe

   Champs ("pkid"); ? >> Ajouter

   $ (". submitButton"). click (function () { var form = $ (this) .parent ("formulaire"); console.log (jQuery (formulaire) .attr ("id")); });

Les identifiants HTML doivent être uniques donc n'utilisez pas id = "hdn_prodpkid" quel que soit le nombre d'éléments avec hdn_prodpkid identifiant le l'instruction suivante

$("form").submit(function() {
    var id= $(this).data('id'); //Example
    $(this).find('input, select') //Target the descendant
        .jqBootstrapValidation({
            submitSuccess: function($form, event) {
                //Perform the desired operation here to get the relvant data from thr form 
                
                event.preventDefault();                
                $.ajax({
                    url: "./product_addtocart_p.php",
                    type: "POST",
                    data: {
                        hdn_prodpkid: $form.data('id') //Get Arbitary data
                    },
                    cache: false,
                }) 
            }
    }); 
}); 

vous renverra toujours la valeur du premier élément.

Je vous recommande de ne pas utiliser l'élément hidden comme vous l'êtes ne pas envoyer le formulaire à l'API à la place en utilisant l'appel ajax () .

Une solution immédiate ( Je ne recommanderais pas cette approche ) serait d'utiliser

while () {
    <form data-id="<?php print $rs_list->Fields("pkid"); ?>" novalidate>
         <button type="submit">Add</button>
    </form> 
}

Utilisez des attributs data- * personnalisés pour conserver des informations arbitraires sous la forme, par exemple, pkid qui peuvent être récupérées en utilisant la méthode .data (key) .

En supposant que et descendent de l'élément de formulaire, utilisez .find () pour obtenir la référence Ensuite, appliquez la méthode jqBootstrapValidation () sur eux.

Lors de la soumission du formulaire en utilisant jqBootstrapValidation () , le submitSuccess ($ form, event) La méthode de rappel donne les références de l'élément

HTML p >

var hdn_prodpkid = $form.find("input#hdn_prodpkid").val();

Script

var hdn_prodpkid = $("input#hdn_prodpkid").val();