How to get div values that are dynamically generated by a php script?

Question

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>

I'm not entirely sure what you're asking... but if you want to identify a DIV that is clicked on, you would usually use the ID for that. If ID can't be changed, then a dataset equivalent. Or have I misunderstood your requirement? — Theo d'Or
– Theo d'Or, Commented Nov 13, 2017 at 8:04
Yes, i want to identify the DIV that is clicked on, but the DIVs are generated dynamically and whenever I am clicking on any DIV it shows the name of only the first DIV even if I click on some other DIV. — Neeraj Negi
– Neeraj Negi, Commented Nov 16, 2017 at 5:07

wlodziu · Accepted Answer · 2017-11-13 08:00:28Z

1

ID of element in HTML must be unique. Use class. In loop you declare static name of ID, that are not unique.

answered Nov 13, 2017 at 8:00

wlodziu

668 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Theo d'Or · Accepted Answer · 2017-11-16 12:27:39Z

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.

Collectives™ on Stack Overflow

How to get div values that are dynamically generated by a php script?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related