如何在 JS 页面上使用 jQuery 从许多动态生成的表单中获取提交的表单 ID

Question

我有产品列表页面，其中所有列出的产品都使用 while 循环使用不同的表单名称和 ID，如下面的代码段所述。我想在用户单击特定产品的“添加”按钮时这样做，然后应使用 AJAX/jQuery 提交该特定产品的表单。产品列表.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 }我想要提交表单的 ID，以便我可以获取该提交表单的输入字段值。但是在每次提交表单时，我都会得到最后一个表单的 ID。那么如何在 JS 页面上获取唯一（仅提交）表单的 ID？请指教。当只有一个表单要提交时，下面的代码可以完美运行。在这种情况下，表单 ID 在 .php 和 .js 页面上都是预定义的。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...            }        }    });});

Answer 1

请找到更改希望这有效

1. 首先更新，重复 id 的按钮代码是无效的

2. 按类触发按钮的点击事件

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

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

Answer 2

当用户点击添加（添加到购物车）按钮时，该按钮的父表单将被提交，因为您正在使用<button type="submit">Add</button>.

该type="submit"属性用于表单提交。如果你有多个表单，那么使用 jQuery 来获取提交的表单元素，就像这样 -

$("form").submit(function(){

  var form = $(this);

  var id = form.attr('id');

  alert(id + ' form submitted');

});

当从您的product_listing.php文件提交任何表单时，上述代码将运行并检索该提交表单的 ID。

之后，您可以运行您的 ajaxproduct_listing.js文件进行其他计算。

- 更新 -

尝试使用下面的例子

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

现在我已经在函数外定义了 id 变量，所以你可以在函数外访问它。

希望这会奏效...

- 更新 -

我无法重现你提供的代码，所以我只建议你如何处理这个问题。首先，简化你的代码并检查哪些代码有效或哪些代码无效，然后，你必须检查为什么这段代码无效。

如果可能的话，简化您的代码，让您了解为什么您的代码无法正常工作。我已经简化了你的代码如果可能的话使用简化的代码。

谢谢

您的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 3

HTML 中的标识符必须是唯一的，id="hdn_prodpkid"因此无论具有 id 的元素数量如何，都不要使用hdn_prodpkid以下语句

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

将始终返回第一个元素的值。

我建议您不要使用该hidden元素，因为您实际上并没有将表单提交给 API，而是使用ajax()调用。

立即解决方案（我不推荐这种方法）是使用

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

使用自定义属性以可以使用方法获取的data-*形式保存任意信息。pkid.data(key)

假设<input>和<select>是表单元素的后代，用于.find()获取引用，然后jqBootstrapValidation()在它们上应用方法。

jqBootstrapValidation()当使用回调方法提交表单时，会给出用户尝试提交的元素submitSuccess($form, event)的引用（包装在 jQuery 中），即。它可用于获取所需后代元素的引用或从元素中获取任意数据。<form>$form<form>

HTML

while () {

    <form data-id="<?php print $rs_list->Fields("pkid"); ?>" novalidate>

         <button type="submit">Add</button>

    </form> 

}

脚本

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

                }) 

            }

    }); 

});