如何在 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

请找到更改希望这有效首先更新，重复 id 的按钮代码是无效的按类触发按钮的点击事件<button class="submitButton" type="submit" name="btn_addtocart" id="btn_addtocart_" .$rs_list->Fields("pkid");&nbsp;?>>添加$(".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(){&nbsp; var form = $(this);&nbsp; var id = form.attr('id');&nbsp; alert(id + ' form submitted');});当从您的product_listing.php文件提交任何表单时，上述代码将运行并检索该提交表单的 ID。之后，您可以运行您的 ajaxproduct_listing.js文件进行其他计算。- 更新 -尝试使用下面的例子$(document).ready(function() {var id; //For global access$("form").submit(function(){&nbsp; var form = $(this);&nbsp; &nbsp;id = form.attr('id');&nbsp; $("#"+id+" input, #"+id+" select").jqBootstrapValidation({&nbsp; &nbsp; preventSubmit: true,&nbsp; &nbsp; submitError: function($form, event, errors) {&nbsp; &nbsp; &nbsp; &nbsp; ...other code...&nbsp; &nbsp; },&nbsp; &nbsp; submitSuccess: function($form, event) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; var hdn_prodpkid = $("input#hdn_prodpkid").val();&nbsp; &nbsp; ... other variables...&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "./product_addtocart_p.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hdn_prodpkid: hdn_prodpkid,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ... other variables...&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; success: function(data)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...other code...&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });});});alert(id);现在我已经在函数外定义了 id 变量，所以你可以在函数外访问它。希望这会奏效...- 更新 -我无法重现你提供的代码，所以我只建议你如何处理这个问题。首先，简化你的代码并检查哪些代码有效或哪些代码无效，然后，你必须检查为什么这段代码无效。如果可能的话，简化您的代码，让您了解为什么您的代码无法正常工作。我已经简化了你的代码如果可能的话使用简化的代码。谢谢您的product_listing.jsvar id = '';$(function() {&nbsp; $("form").submit(function(e) {&nbsp; &nbsp; e.preventDefault(); // prevent default submit behaviour&nbsp; &nbsp; var form = $(this);&nbsp; &nbsp; id = form.attr('id');&nbsp; &nbsp; var hdn_prodpkid = $("#id #hdn_prodpkid").val();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: "./product_addtocart_p.php",&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; hdn_prodpkid: hdn_prodpkid&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; }) // End of Ajax&nbsp; }); // End of form submit}); // End of $(function())&nbsp;

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>HTMLwhile () {&nbsp; &nbsp; <form data-id="<?php print $rs_list->Fields("pkid"); ?>" novalidate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="submit">Add</button>&nbsp; &nbsp; </form>&nbsp;}脚本$("form").submit(function() {&nbsp; &nbsp; var id= $(this).data('id'); //Example&nbsp; &nbsp; $(this).find('input, select') //Target the descendant&nbsp; &nbsp; &nbsp; &nbsp; .jqBootstrapValidation({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; submitSuccess: function($form, event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Perform the desired operation here to get the relvant data from thr form&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "./product_addtocart_p.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hdn_prodpkid: $form.data('id') //Get Arbitary data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp;});&nbsp;