Leaderboard

Instead of changing the display to "block" when you click the button, set it to "display: table-cell;" <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type='text/javascript'> function showDetails(cnt) { $(".more").css("display", "none"); // hide all var details = "details"+cnt; var x = document.getElementById(details); if (x.style.display === "none") { x.style.display = "table-cell"; // display requested one } else { x.style.display = "none"; } } </script>

One shouldn't store/save sensitive values. Once the input values are used to authorize a user, you should use a generated token to recognize the authenticity of the user from that point on. As for a pdf I don't believe you have to worry about that.

I was bored today and decided to take a break from my own develop, so I decided to fool around with this and see if I could help. I don't know exactly what you are doing and I only used one database table to do this. However, I think what you are after can easily be modified? If not that's OK as I said I was bored. 😂 I don't know why you don't use MySQL to pull in the range values of the prices? I created a mythical Bicycle Shop called Rocket Bicycles : <table id="products"> <tr> <th colspan="4">The Rocket Bicycles Inventory</th> </tr> <tr> <th>Record</th> <th>Product</th> <th>Price (＄)</th> <th>Quantity</th> </tr> </table> and I used Vanilla JavaScript (I find that is just as easy and is easily transferable) 'use strict'; (function () { let data = {}; /* The Following can easily be put into HTML via js */ data.min = 0; data.max = 2000.00; /* Handle General Errors in Fetch */ const handleErrors = function (response) { if (!response.ok) { throw (response.status + ' : ' + response.statusText); } return response.json(); }; const productCard = function (record){ /* Get the Table Id */ const table = document.getElementById('products'); /* Create the Table Row element */ const tr = document.createElement('tr'); /* Create the necessary Elements for the column data */ const id = document.createElement('td'); const product = document.createElement('td'); const price = document.createElement('td'); const quantity = document.createElement('td'); /* Append the Table Row element to the Table */ table.append(tr); /* Append the Column Row data to the Table Rows */ tr.append(id); tr.append(product); tr.append(price); tr.append(quantity); /* Assign the appropiate class to the table data row */ /* Give the appropiate table data the corresponding data */ id.classList.add('normal_format'); id.textContent = record.id; product.classList.add('product_format'); product.textContent = record.product; price.classList.add('money_format'); price.textContent = "$" + record.price.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); quantity.classList.add('normal_format'); quantity.textContent = record.quantity; }; /* Success function utilizing FETCH */ const inventoryUISuccess = function (records) { /* Grabing the record data from the Database Table * and assigning the value of the objects to the * HTML table using a forEach statement in * Vanilla JavaScript. */ records.forEach(record => productCard(record)); }; /* If Database Table fails to load then hard code the correct answers */ const inventoryUIError = function (error) { console.log("The Darn Database Table did not load", error); }; /* create FETCH request for check answers */ const price_range = function (url, succeed, fail) { fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(data) }) .then((response) => handleErrors(response)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; price_range('rockets_inventory.php', inventoryUISuccess, inventoryUIError); })(); the PHP for the "Fetching of the Data": <?php require_once 'assets/config/config.php'; /* Makes it, so we don't have to decode the json coming from javascript */ header('Content-type: application/json'); /* * The below must be used in order for the json to be decoded properly. */ try { $data = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR); } catch (JsonException $e) { } /* * Grab the database table data that meets the price requirements */ $sql = 'SELECT id, product, price, quantity FROM rocket_bicycles WHERE price >= :min AND price <= :max ORDER BY price '; $stmt = $pdo->prepare($sql); // Prepare the query: $stmt->execute(['min' => (float)$data['min'], 'max' => (float)$data['max']]); // Execute the query with the supplied data: $result = $stmt->fetchAll(PDO::FETCH_ASSOC); /* * If everything validates OK then send success message to Ajax / JavaScript */ if (isset($result)) { output($result); } else { errorOutput('There is a darn problem!'); } /* * Throw error if something is wrong */ function errorOutput($output, $code = 500) { http_response_code($code); try { echo json_encode($output, JSON_THROW_ON_ERROR); } catch (JsonException) { } } /* * After converting data array to JSON send back to javascript using * this function. */ function output($output) { http_response_code(200); try { echo json_encode($output, JSON_THROW_ON_ERROR); } catch (JsonException) { } } and here's the SQL for the database table -- phpMyAdmin SQL Dump -- version 5.1.1 -- https://www.phpmyadmin.net/ -- -- Host: localhost:8889 -- Generation Time: Oct 08, 2021 at 11:24 PM -- Server version: 5.7.34 -- PHP Version: 8.0.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = "+00:00"; -- -- Database: `php_sandbox` -- -- -------------------------------------------------------- -- -- Table structure for table `rocket_bicycles` -- CREATE TABLE `rocket_bicycles` ( `id` int(11) NOT NULL, `product` varchar(60) DEFAULT NULL, `price` float(6,2) NOT NULL, `quantity` int(6) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Dumping data for table `rocket_bicycles` -- INSERT INTO `rocket_bicycles` (`id`, `product`, `price`, `quantity`) VALUES (1, 'Banana Rocket', 499.99, 5), (2, 'Pink Lady ', 499.99, 8), (3, 'Speed Demon', 999.98, 2), (4, 'Quick Silver', 1500.00, 1), (5, 'Lucky Lady', 300.00, 7); -- -- Indexes for dumped tables -- -- -- Indexes for table `rocket_bicycles` -- ALTER TABLE `rocket_bicycles` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `rocket_bicycles` -- ALTER TABLE `rocket_bicycles` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; COMMIT; and a little bit of css: #products { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 90%; margin: 0 auto; } #products td, #products th { border: 1px solid #ddd; padding: 8px; } #products tr:nth-child(even) { background-color: #f2f2f2; } #products tr:hover { background-color: #ddd; } #products th { padding-top: 12px; padding-bottom: 12px; text-align: center; background-color: #04AA6D; color: white; } .normal_format { text-align: center; width: 6.250em; } .product_format { text-align: left; width: 6.250em; } .money_format { width: 3.125em; text-align: right; } Sorry for the long post, but I hope it helps:

That line in your onchange function concerns me. If it was generated when PHP was executing. how does it relate to the id of the product the user is clicking in the browser?

I am not suggesting you go to a Framework although they are structured the way I mentioned. Check out this free Laracast video series on PHP. It is the only video tutorial I have seen that I would recommend to anyone. It will get you going in the right direction. Watch each one even if you understand it already. The PHP Practitioner https://laracasts.com/series/php-for-beginners

This is a common area of confusion. Anything having to do with php and files (include/require/fopen, etc) wants file system paths. (OS Filesystem) Anything having to do with web resources (images, css, javascript) wants a url. Urls only exist in webspace. (Webspace/HTTP 2.0 Serving). As the front controller is now a popular design pattern for web apps and frameworks, you will come to find that it is frequently the case, that the only PHP script that would be under the webroot, would be the front controller script. All requests are thus, routed through the front controller, using a router. All the classes and other php scripts will be in directories that are not visible in any way from webspace. This is far superior in numerous ways, than a system that has entry points from scripts that have been mapped into webspace. I only bring this up because if you think about it for a minute, it should reinforce your understanding that PHP's functions require a filesystem path and not a url. PHP can load scripts in any directory on your file server that the PHP process has operating system level access to. Things that are not related to php code, as mentioned above, that in general are referenced in your html markup, are things in webspace. Each can be accessed via a url. Both webspace/url's and filesystems can have relative paths, so this can lead to confusion. A relative filesystem path is typically relative to the "current working directory" of the process that is running. This can easily get confusing when you are executing scripts that one or 2 levels deep in a hierarchy. For this reason, some technique which establishes the filesystem project root is helpful. That could be the document root, or as is more common these days, a variable or constant established through a bootloader or init script that references either the __FILE__ or __DIR__ magic constants. Using this technique is equivalent to, from a file system perspective, establishing something like the document root for your php code. At that point you can have simple helper functions that can concat project relative paths to it, to always have a fully qualified filesystem path. As an example, here is a simplified version of a directory path you will find using one of a number of the more popular PHP frameworks. var/ ├─ www/ │ ├─ my_website/ │ │ ├─ config/ │ │ │ ├─ init.php │ │ ├─ public/ │ │ │ ├─ css/ │ │ │ │ ├─ style.css │ │ │ ├─ images/ │ │ │ ├─ js/ │ │ │ ├─ index.php │ │ ├─ src/ │ │ │ ├─ pageA.php │ │ │ ├─ pageB.php │ │ ├─ vendor/ In this case, the webroot of the site will be mapped to the filesystem /var/www/my_website/public So the css file in markup can be referenced as: https://www.mywebsite.com/css/style.css. However, in your markup it would be completely safe and reasonable to reference it with the relative path "/css/style.css" What about file system paths for a PHP require of pageA.php? Keep in mind, that only the public directory is visible to webspace. there is no way to reach any file using a url in the src or vendor directories. Let's assume that at some point in the .../public/index.php there is code that is trying to require_once("pageA.php") You could attempt to use relative paths, based on the knowledge of where the public directory exists relative to the src directory, but this can get very convoluted once you have more complicated file system trees. It would be convenient to always use the relative path of the src script. In the case it would be simply "/src/pageA.php". A solution in index.php could be a function that always returns the path to the project directory (my_website). That would work great in index.php as a front controller, because every request goes through it, so if that variable gets initialized it can be safely used in all includes. In your case, you don't have a front controller, so this isn't as helpful. There is however, a common pattern that has been used to do this, and that is to make sure that any executing script (script that can be directly referenced in webspace) requires a config, bootstrap or setup script in the root of your project. This isn't perfect, because the filesystem path to this script will vary depending on the directory structure you have, but at worst you need a relative file system path to it. Let's assume in this example this would be .../config/init.php In init.php you have this variable defined: <?php $PROJECT_ROOT = substr(@realpath(dirname(__FILE__)),0, -1 * strlen('/config')); // The only hardwired fact here, is that the init.php script is in the /config directory. We need to strip that off the path to get back to the root. //If it was further nested from the project root, the '/config' constant would need to be changed accordingly to where it exists. //Keep in mind there would only be one of these files in the project, and typically it might also have other global configuration variables like database credentials. So long as you include the .../config/init.php script, you will be able to use the $PROJECT_ROOT, and append your relative file system paths to it to include or reference other scripts. All you need to know is the location of those scripts relative to your project (my_website). So in index.php, code like this could be used to reliably reference pageA for inclusion, simply knowing that relative to the project, it exists in the src directory. Furthermore pageA.php could reference pageB.php reliably. // In public/index.php require_once("../config/init.php"); // Sometime later, we need pageA.php require_once($PROJECT_ROOT . '/src/pageA.php'); // In pageA.php, pageA.php needs pageB.php require_once($PROJECT_ROOT . '/src/pageB.php'); Since in your case, again you don't have a front controller, you just need to make sure that any scripts that get directly executed by the web server via a url, include the "config/init.php" script in relative fashion. You probably already have a configuration script like this in your project, that everything must include, and if so, that would be a good candidate for adding the $PROJECT_ROOT to. Hope this helps. As most people are now using composer, with component libraries, and class autoloading using PSR-0 or PSR-4 standards with classes and namespaces, this already solves a lot of file inclusion problems for a project, and the more you can move your project towards an MVC pattern, the easier it will be to extend, enhance and test. If you don't understand composer, namespaces, autoloading etc., these would be excellent growth areas for you, allowing you to evolve your project towards something more sophisticated and professional.