I need help figuring out how to get a value from an HTML div element and use it in a MySQL query with PHP.
Let me show you what I mean with an example:
<span class='product-price'>25</span>
I want to take that number 25 and put it into a database query like this:
<?php
$query = "SELECT * FROM products WHERE price = 25";
?>
Is this something that can be done? I’m pretty new to PHP and not sure how to grab the div content and pass it to my SQL statement. Any help would be great!
Manual JavaScript + PHP works but gets messy fast with multiple forms or dynamic content.
I hit this same issue building a product catalog. Instead of writing custom JS and PHP handlers, I automated everything with Latenode.
Just set up a webhook that catches the div value from your frontend and chains straight to your MySQL query. No PHP scripts or manual AJAX handling needed.
Here’s the flow:
You can add validation, logging, or trigger other stuff without touching code. Just drag and drop in their visual editor.
Saved me hours debugging forms and database connections. Check it out: https://latenode.com
You need client-server communication here since PHP runs server-side before the page loads, but your HTML div exists client-side after rendering. Easiest way is using a form - capture the div value with JavaScript and stick it in a hidden input field, then submit to your PHP script. Something like document.getElementById('hiddenPrice').value = document.querySelector('.product-price').textContent; before submitting. You could also use AJAX with XMLHttpRequest or fetch() to send the value to a PHP endpoint that handles your database query. Just make sure you sanitize and validate anything from the client side before putting it in your SQL queries - prevents injection attacks.
I hit this exact problem building a price comparison tool last year. Here’s what worked: combine data attributes with URL parameters. Skip extracting the price after rendering - just store it in a data attribute on your span: <span class='product-price' data-price='25'>25</span>. Use JavaScript to grab that data attribute and append it when users click: window.location.href = 'search.php?price=' + element.dataset.price. Your PHP grabs it with $_GET['price']. Way more natural than AJAX for simple queries, and you don’t deal with async headaches. Just cast the value with intval() before your query to avoid weird input problems.
The problem is PHP runs before the page loads, but your div content only exists after the DOM renders. I’ve hit this issue tons of times in e-commerce projects when pulling product prices from the database. Sure, AJAX and form submissions work, but here’s another option - use sessions or cookies to bridge the gap. Grab the div value with JavaScript, toss it in sessionStorage, then pull it back on the next page load or form submit. But here’s what’s way more important and nobody’s stressing enough - you’re wide open to SQL injection. Don’t ever concatenate user input straight into queries like you’re doing. Use prepared statements: $stmt = $pdo->prepare("SELECT * FROM products WHERE price = ?"); $stmt->execute([$price]); Also, step back and ask if you even need to extract the price from the div. If you’re already displaying products from your database, you’ve probably got the price ID or value available server-side without this whole roundtrip mess.
you gotta get that value using js first, then send it to php using ajax or a form. php runs on the server so it can’t directly see the div. try document.querySelector('.product-price').innerText in js, and send it over to your php.
You could also use fetch() directly - grab the div text with getElementsByClassName('product-price')[0].textContent and POST it to a separate PHP file that handles the query. Way cleaner than hidden forms.