How to get submitted form id from many dynamically generated forms using jQuery on JS page

Question

I have products listing page where all listed products have different form name and id using while loop as mentioned in below piece of code. I want to make so when user clicks on 'Add' button for particular product, then that specific product's form should be submitted using AJAX/jQuery.

product_listing.php

<script language="JavaScript" src="./product_listing.js"></script>
while loop to list products on page { 

    <form id="frm_add<?php print $rs_list->Fields("pkid"); ?>" name="frm_add<?php print $rs_list->Fields("pkid"); ?>" novalidate>
        <input type="hidden" name="hdn_prodpkid" id="hdn_prodpkid" value="<?php print $rs_list->Fields("pkid"); ?>">
        ... other variables...
        <button type="submit" name='btn_addtocart' id='btn_addtocart'>Add</button>
    </form>

end of while loop }

I want submitted form's ID so I can fetch input fields' values for that submitted form. But on every form submission I got last form's ID.

So how can I get unique (only submitted) form's ID on JS page? Please advise.

Below code works perfectly when there is a single form to submit. In that case, form id is predefined on both .php and .js pages.

product_listing.js

$(function() {

    $("#"+NEED_SUBMITTED_FORM_ID_HERE+" input, #"+NEED_SUBMITTED_FORM_ID_HERE+" 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...
            }
        }
    });
});

-- UPDATED CODE --

product_listing.js

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

        $("#"+id+" input, #"+id+" select").jqBootstrapValidation({
        //alert(id + ' form submitted'); // Can't alert ID here
            submitSuccess: function($form, event) {
                event.preventDefault(); // prevent default submit behaviour
                var hdn_prodpkid = $("input#hdn_prodpkid").val();
                $.ajax({
                    url: "./product_addtocart_p.php",
                    type: "POST",
                    data: {
                        hdn_prodpkid: hdn_prodpkid
                    },
                    cache: false,
                }) // End of Ajax
            }, // End of submitSuccess
        }); // End of jqBootstrapValidation
    }); // End of form submit
}); // End of $(function()) 

Answer 1

When a user clicks on Add (Add-to-cart) button that button's parent form will be submitted because you are using <button type="submit">Add</button>.

The type="submit" property is used for a form submission. If you have multiple forms then, use the jQuery to get submitted form elements like this-

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

When any form submitted from your product_listing.php file the above code will run and retrieves the Id of that submitted form.

After that, you can run your ajax for other calculation onproduct_listing.js file.

--Update--

try using the below example

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

Now I have defined the id variable outside the function so you can access it outside the function.

Hope this will work...

--Update--

I am not able to reproduce your provided code so I only suggest you how to handle this problem. First, simplify your code and check which code is working or which code is not worked, after that, you have to check why this code is not working.

If possible simplify your code that could get you the hint why your code is not working. I have simplified your code If possible use the simplified code.

Thank you

Your product_listing.js

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

Answer 2

please find the changes hope this works

1. first of all update, the code for the button the id is repeated that is invalid

2. trigger the click event of the button by class

   <button class="submitButton" type="submit" name="btn_addtocart" id="btn_addtocart_" .$rs_list->Fields("pkid"); ?>>Add

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

Answer 3

Identifiers in HTML must be unique hence don't use id="hdn_prodpkid" as irrespective to number of elements with hdn_prodpkid id the following statement

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

will always return you the value of the first element.

I would recommend you not use the hidden element as you are not actually submitting the form to API instead using ajax() call.

Immediate solution(I would not recommend this approach) would be to use

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

---

Use custom data-* attributes to persists arbitrary information with the form i.e. pkid which can be fetched using .data(key) method.

Assuming <input> and <select> are descendant of the form element, Use .find() to get the references afterward apply jqBootstrapValidation() method on them.

When submitting the form using jqBootstrapValidation() the submitSuccess($form, event) callback method gives the references of the <form> element which has the user attempted to submit (wrapped in jQuery) i.e.$form. It can be used to get the references of the desired descendant element or get the arbitrary data from the <form> element.

HTML

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

Script

$("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,
                }) 
            }
    }); 
});