[英]How do I get a dynamically created ID?
I'm an absolute beginner in using javascript and ajax and that's why I'm stuck now. 我是一个使用javascript和ajax的绝对初学者,这就是我现在被困住的原因。 I have a while loop in which there are 2 different buttons. 我有一个while循环,其中有2个不同的按钮。 Both work, as I imagine, except for one little thing ... 正如我想象的那样,两者都有效,除了一件小事......
The product-id
is always passed only for the first element or, if I change it for the last element. product-id
始终仅针对第一个元素传递,或者如果我为最后一个元素更改它。 How can I pass the correct product ID to the script? 如何将正确的产品ID传递给脚本?
This is my PHP file: 这是我的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; ?>
My Javascript is: 我的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>
I know that the product id in my example is always the same, but how can I pass the correct one to the script if there are 10 or more entries in the loop? 我知道我的示例中的产品ID始终是相同的,但如果循环中有10个或更多条目,我怎样才能将正确的产品ID传递给脚本?
Your problem is that id
is unique and can only be assigned once to a element, like so: 您的问题是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>
You can access the currently clicked class by using $(this)
like so: 您可以使用$(this)
来访问当前单击的类,如下所示:
$('.paragraph').click(function() {
$(this).html('See, totally legal.');
});
See this example to see this in use. 请参阅此示例以查看此内容。
Your solution needs to add an onclick()
method to a button
. 您的解决方案需要在button
上添加onclick()
方法。 This then gets the parent()
form. 然后获取parent()
表单。 You can then find()
the class and get the val()
from the form data. 然后,您可以find()
类并从表单数据中获取val()
。
Your form was also submitting the action. 您的表单也提交了该操作。 You need to have a <button>
of type button
so it does not submit the action. 你需要一个类型button
的<button>
,所以它不提交动作。 This must also be a class since it will not be unique if you're multiply creating them. 这也必须是一个类,因为如果你多次创建它们将不是唯一的。
Here is a working example to just re-add your AJAX request too. 这是一个只是重新添加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>
Your AJAX Data will look like this: 您的AJAX数据将如下所示:
data: {
user_id: elements.userid,
product_id: elements.productid,
collection_id: elements.collection,
wishlist_id: elements.wish
}
Your PHP code could look like this: 您的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; ?>
I read your code , You want to have multiple entries and want to read / fetch dynamically generated Form's Feilds in the common JS Function Add which is currently referring to FIRST FOUND ELEMENT IN RENDERED HTML - Thats the reason you are getting the same value each time. 我读了你的代码,你想要有多个条目,想要在常见的JS函数Add中读取/获取动态生成的Form的Feilds,这个函数目前指的是在渲染的HTML中的第一个被发现的元素 - 这就是你每次获得相同值的原因。
You need to alter the logic with little tric - Pass something uniqueness in argument of ADD function 你需要用很少的三元组改变逻辑 - 在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">
NOW read uniquely in ADD Function 现在在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 ...
}
Hope this make you sense How i have generated in Loop Unique ELEMENT ID and pass same ID in the function as Argument to fetch them in JS. 希望这能让你感觉如何在循环唯一元素ID中生成并在函数中传递相同的ID作为Argument以在JS中获取它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.