亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 JS 頁面上使用 jQuery 從許多動態生成的表單中獲取提交的表單 ID

如何在 JS 頁面上使用 jQuery 從許多動態生成的表單中獲取提交的表單 ID

PHP
幕布斯6054654 2022-12-11 09:47:14
我有產品列表頁面,其中所有列出的產品都使用 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...            }        }    });});
查看完整描述

3 回答

?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

請找到更改希望這有效

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


查看完整回答
反對 回復 2022-12-11
?
慕田峪9158850

TA貢獻1794條經驗 獲得超8個贊

當用戶點擊添加(添加到購物車)按鈕時,該按鈕的父表單將被提交,因為您正在使用<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()) 


查看完整回答
反對 回復 2022-12-11
?
至尊寶的傳說

TA貢獻1789條經驗 獲得超10個贊

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,

                }) 

            }

    }); 

}); 


查看完整回答
反對 回復 2022-12-11
  • 3 回答
  • 0 關注
  • 197 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號