如何獲取動態創建的ID？

Question

我是一個使用javascript和ajax的絕對初學者，這就是我現在被困住的原因。 我有一個while循環，其中有2個不同的按鈕。 正如我想象的那樣，兩者都有效，除了一件小事......

product-id始終僅針對第一個元素傳遞，或者如果我為最后一個元素更改它。 如何將正確的產品ID傳遞給腳本？

這是我的PHP文件：

<?php while ( $product = $browse->fetch( PDO::FETCH_ASSOC ) ) :
    $postid = $product[ 'id' ];
    $userid = 1; ?>

 <div id="content_<?php echo $postid ?>">
 <div id="reload_<?php echo $postid ?>" class="row postfarbe browse">

  <form method='post' action="" onsubmit="return add();">
    <input type="hidden" id="userid" value="<?php echo $userid ?>" class="input-box">
    <input type="hidden" id="productid" value="<?php echo $postid ?>" class="input-box">
    <input type="hidden" id="collection" value="1" class="input-box">
    <input type="hidden" id="wish" value="0" class="input-box">
    <input type="submit" id="submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">
  </form>

 </div>
</div>
<?php endwhile; ?>

我的Javascript是：

function add()
{
    var userid = document.getElementById("userid").value;
    var productid = document.getElementById("productid").value;
    var collection = document.getElementById("collection").value;
    var wishlist = document.getElementById("wish").value;
    if(userid && productid && collection && wishlist) {
        $.ajax
        ({
            type: 'post',
            url: 'post_collection.php',
            data: {
                user_id:userid,
                product_id:productid,
                collection_id:collection,
                wishlist_id:wishlist
            },
            success: function (response) {
                $("#content_"+ productid).load(" #reload_" + productid);
            }
        });
    }  
    return false;
}
</script>

我知道我的示例中的產品ID始終是相同的，但如果循環中有10個或更多條目，我怎樣才能將正確的產品ID傳遞給腳本？

Answer 1

您的問題是id是唯一的，只能分配給一個元素，如下所示：

<p id="paragraph"> This is legal </p>
<p id="paragraph"> This is illegal - It is no longer unique </p>

<p class="paragraph"> This is legal </p>
<p class="paragraph"> This is legal </p>

您可以使用$(this)來訪問當前單擊的類，如下所示：

$('.paragraph').click(function() {
    $(this).html('See, totally legal.');
});

請參閱此示例以查看此內容。

---

您的解決方案需要在button上添加onclick()方法。 然后獲取parent()表單。 然后，您可以find()類並從表單數據中獲取val() 。

您的表單也提交了該操作。 你需要一個類型button的<button> ，所以它不提交動作。 這也必須是一個類，因為如果你多次創建它們將不是唯一的。

這是一個只是重新添加AJAX請求的工作示例。

 $(document).ready(function() { $('.submit-btn').click(function() { var elements = { 'userid': $(this).parent().find('.userid').val(), 'productid': $(this).parent().find('.productid').val(), 'collection': $(this).parent().find('.collection').val(), 'wish': $(this).parent().find('.wish').val() }; console.log("User ID: " + elements.userid); console.log("Product ID: " + elements.productid); console.log("Collection: " + elements.collection); console.log("Wish: " + elements.wish); // TODO: Add your AJAX request using these elements }); }); 

 button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- This will be generated by PHP --> <form method='POST'> <input hidden class="userid input-box" value="1"> <input hidden class="productid input-box" value="1"> <input hidden class="collection input-box" value="1"> <input hidden class="wish input-box" value="1"> <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button> </form> <!-- This will be generated by PHP --> <br /> <form method='POST'> <input hidden class="userid input-box" value="2"> <input hidden class="productid input-box" value="2"> <input hidden class="collection input-box" value="2"> <input hidden class="wish input-box" value="2"> <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button> </form> 

---

您的AJAX數據將如下所示：

data: {
    user_id: elements.userid,
    product_id: elements.productid,
    collection_id: elements.collection,
    wishlist_id: elements.wish
}

---

您的PHP代碼可能如下所示：

<?php foreach($browse->fetchAll(PDO::FETCH_ASSOC) as $product):
    $id = $product['id'];
    $productDd = $product['product_id'];
    $productCategory = $product['category']; // TODO: change to your column nanme
    $productWishList = $product['wish']; ?>

    <div class="content_<?= $id; ?>">
        <div class="reload_<?= $id; ?> row postfarbe browse">
            <form method='POST'>
                <input hidden class="userid input-box" value="<?= $id; ?>">
                <input hidden class="productid input-box" value="<?= $productCategory; ?>">
                <input hidden class="collection input-box" value="<?= $productCollection; ?>">
                <input hidden class="wish input-box" value="<?= $productWishList; ?>">
                <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button>
            </form>
        </div>
    </div>

<?php endforeach; ?>

Answer 2

我讀了你的代碼，你想要有多個條目，想要在常見的JS函數Add中讀取/獲取動態生成的Form的Feilds，這個函數目前指的是在渲染的HTML中的第一個被發現的元素 - 這就是你每次獲得相同值的原因。

你需要用很少的三元組改變邏輯 - 在ADD函數的參數中傳遞一些唯一性

<form method='post' action="" onsubmit="return add(<?php echo $postid; ?> );">
<input type="hidden" id="<?php echo $postid; ?>_userid" value="<?php echo $userid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_productid" value="<?php echo $postid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_collection" value="1" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_wish" value="0" class="input-box">
<input type="submit" id="<?php echo $postid; ?>_submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">

現在在ADD函數中唯一讀取

function add(post_id){

var userid = document.getElementById(post_id+"_userid").value;
var productid = document.getElementById(post_id+"_productid").value;
var collection = document.getElementById(post_id+"_collection").value;
var wishlist = document.getElementById(post_id+"_wish").value;
### Your code as it is ...  
}

希望這能讓你感覺如何在循環唯一元素ID中生成並在函數中傳遞相同的ID作為Argument以在JS中獲取它們。