I want to alert the name of the item whose place bid button I will click but my code seems to alert only laptop. Can anyone tell me how to get div values that are dynamically generated through a php script. Below is the code for the page.I want to alert name of that item whose place bid I click on. Since the page is dynamically generated which gets item details from a database containing item details.
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from items";
$select_query_result = mysqli_query($con, $select_query) or
die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css"/>
<link rel="stylesheet" type="text/css" href="seperate2.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function post_data(){
var item_name = document.getElementById("item_name").innerHTML;
alert(item_name);
}
</script>
</head>
<body>
<div class="container">
<h1>Bid</h1>
<div class="row">
<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
<div class="col s3" >
<div id="item_name"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data()">Place Bid</button>
</div>
<?php } ?>
</div>
</div>
</body>
</html></div>
ID of element in HTML must be unique. Use class. In loop you declare static name of ID, that are not unique.
Your code requires a counter by which the dynamically created DIVs may be accessed. Your <div class="row"> block would be:
<div class="row">
<?php
$divCounter = 0;
while($row = mysqli_fetch_array($select_query_result)) {
$divCounter += 1;
?>
<div class="col s3" >
<div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
</div>
<?php } ?>
</div>
Notice that the call to the Javascript function post_data() now provides the DIV id that contains its counter. To complete the job, adjust post_data() to include the parameter:
<script type="text/javascript">
function post_data(divId){
var item_name = document.getElementById(divId).innerHTML;
alert(item_name);
}
</script>
If you prefer, instead of using a counter and concatenating with the static "item_name", you may use the $row[item_name] property instead. Whether or not you can do this will depend on whether this property can serve as a valid HTML id attribute value.