Exploring and Presenting Database Findings (PHP MySQL) in a Format Beyond Traditional Tables in HTML

My code is functioning as intended, where a search is performed in the table based on user input, displaying the attributes within an HTML table. For a clearer picture, I will provide an image of the search output: Output of the Search

However, due to the presence of printf in the code, I am facing uncertainty regarding how to properly output the data into my table. There are 12 attributes selected and the implementation involves the use of AJAX and JavaScript.

Here is a snippet from the index.html:

<br><br>
<!-- Search box -->
    <form method="post" action="index.php">
    <input type="text" id="search" name="search" required placeholder="Search for an item" /><input type="submit" value="LOAD"/>
    <br></form>

    <b>Ex: </b><i>Bread, Milk, Egg, etc or SKU</i>
    <br />
    <!-- Suggestions displayed below -->
    <div id="display"></div>


<table id="itemsTable"> 
                        // Table headers...
</tr><tr><td>
              <?php
    if (isset($_POST['search'])) {
      // SEARCH FOR ITEM NAME
      require "2-search.php";

      // DISPLAY RESULTS
      if (count($results) > 0) {
        foreach ($results as $r) {
          printf("<div>%s - %s - %s - %s - %s - %s - %s - %s - %s - %s - %s- %s</div>", $r['quantity'], $r['item'], $r['sku'], $r['item_name'], $r['item_price'], $r['subtotal'], $r['cartons_scanned'], $r['ind_scanned'], $r['cur_inventory'], $r['location_sel'], $r['image'], $r['edit']);
        }
      } else {
        echo "No results found";
      }
    }
    ?>
           </td></tr></table> 
<br><br><br>

For the 2-search.php file:

<?php
// Database configuration...
// Connect to database...
// Search logic...

Lastly, the 3-ajax-search:

<!DOCTYPE html>
<html>
  <head>
    <title>
      AJAX Search Example
    </title>
    <script>
      // JavaScript function for fetching search results...
    </script>
  </head>
  <body>
    <!-- Search form -->
    <form onsubmit="return fetch();">
      <h1>SEARCH FOR USERS</h1>
      <input type="text" id="search" required/>
      <input type="submit" value="Search"/>
    </form>

    <!-- Search results div -->
    <div id="results"></div>
  </body>
</html>

Answer №1

I appreciate the feedback, and thanks to @simone I was able to find the solution to my question.

<table id="itemsTable"> <tr>    <th>Quantity</th> 
                                <th>Item</th> 
                                <th>SKU</th> 
                                <th>Item Name</th> 
                                <th>Item Price</th> 
                                <th>Subtotal</th> 
                                <th>Cartons Scanned</th> 
                                <th>Individually Scanned</th> 
                                <th>Current Inventory</th> 
                                <th>Location Selected</th> 
                                <th>Image</th> 
                                <th>Edit</th>
                        </tr>
              <?php
    if (isset($_POST['search'])) {
      // SEARCH FOR ITEM NAME
      require "2-search.php";

      // DISPLAY RESULTS
      if (count($results) > 0) {
        foreach ($results as $r) {
          echo "<tr>";
          echo "<td>" . $r['quantity'] . "</td>";
          echo "<td>" . $r['item'] . "</td>";
          echo "<td>" . $r['sku'] . "</td>";
          echo "<td>" . $r['item_name'] . "</td>";
          echo "<td>" . $r['item_price'] . "</td>";
          echo "<td>" . $r['subtotal'] . "</td>";
          echo "<td>" . $r['cartons_scanned'] . "</td>";
          echo "<td>" . $r['ind_scanned'] . "</td>";
          echo "<td>" . $r['cur_inventory'] . "</td>";
          echo "<td>" . $r['location_sel'] . "</td>";
          echo "<td>" . $r['image'] . "</td>";
          echo "<td>" . $r['edit'] . "</td>";
          echo "</tr>";
        }
      } else {
        echo "No results found";
      }
    }
    ?>
           </table> 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of Django in conjunction with the jQuery $

I need help with a Django and Ajax project. My objective is to create a lobby website where each client can see the names of all participants currently in the lobby. The approach I'm taking is to have clients send a message every second saying "I&ap ...

When attempting to insert, no action occurs with mongoose

Here is the schema I am using: module.exports = function (mongoose) { var playlist = mongoose.Schema({ title: String, artist: String, album: String, time: Date }); return mongoose.model('playlist', pl ...

Webstorm 2016.1 encountering difficulties accessing JavaScript files

Recently, I upgraded my Webstorm to version 2016.1.1 and everything seemed to be working well. However, I encountered an issue where I can't open any of my *.js files in the editor. Despite restarting Webstorm and my computer multiple times, as well a ...

Exploring the possibilities of integrating jQuery into Firefox extensions

Can someone provide guidance on effectively implementing jQuery within a Firefox extension? My research has not yielded any up-to-date methods that address the latest version of jQuery, and I am aware that directly including it via script tag may lead to c ...

Is it possible for me to dictate the sequence in which javascript / jQuery events are triggered?

Issue at Hand In my asp.net webform, I have a grid where users can update textboxes. These updates trigger a WebMethod call, updating the rest of the row without saving. To save the changes, users must click a save button. While this system works well in ...

Submitting a form using jQuery and processing the response

Can a form be submitted using jQuery without utilizing json, ajax, or other methods for handling the result? For example: <form id="loginform"> //some input fields and a submit button. </form> And then with jQuery: $("#loginform").sub ...

Guide on how to add multiple options to a select element in HTML using prototype.js

What is the best way to add multiple options to a select tag in HTML using prototype js? Appreciate your help. ...

Retrieving session data from a different tab and website

The task at hand involves managing a PHP website (mysite.com) and an ASP.NET website (shop.mysite.com). The client's request is to implement a single sign-on solution for both sites. My approach is to develop a function on the ASP.NET site that can pr ...

Is there a more efficient way to avoid duplicating JS blocks in multiple locations?

I'm currently working on a dual navigation menu/map feature where clicking on specific locations will display a new panel while hiding the previously viewed one. I've also added a map hover effect. You can check out my progress on JSFiddle. As I ...

Difficulty parsing JSON in MVC .Net Core Controller

I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...

The issue of CORS preflight request error persisted even after attempting to resolve it by installing the npm cors

Encountering the following console error while using the fetch api: Error Message in Console: The Fetch API is unable to load https://... The response to the preflight request failed to pass the access control check: No 'Access-Control-Allow-O ...

The NativeArray.add() function in Mozilla Rhino consistently throws an error

I am attempting to build a JavaScript array in Java using the NativeArray class from Mozilla Rhino. However, when I try to add elements to the NativeArray, it throws a java.lang.UnsupportedOperationException. Below is the code snippet: NativeArray array ...

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle. I've included some CSS to position the tab on the right side. My goal was to have those tabs in the lower right corner of the container. If I use absolute positioning for the div, it messes up the tab content width. I tried ad ...

Tips on separating/callback functions based on earlier variables

Breaking Down Callback Functions Based on Previous Variables I am trying to figure out how to efficiently break down callback functions that depend on variables defined earlier in the code. Currently, my code resembles a "callback hell" due to my lack of ...

Using gulp to duplicate files from a specific directory nestled within a larger folder structure

I'm trying to figure out how to address this issue: My goal is to transfer all fonts from bower_components to .tmp/assets/fonts. However, the complication arises with some fonts being .svg files. If I were to use the following code in a typical manne ...

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

Setting up the default path that appears in the URL

Looking to simplify the URL path on your website? When developing webpages, you may have addresses like: www.example.com/index.html www.example.com/about_us.html www.example.com/en/index.html Is there a way to make these URLs more concise, such as: www ...

The Google Contacts API is unable to utilize the max-results parameter when making requests via jQuery AJAX

Here is the code snippet I am using: $.ajax({ url: 'https://www.google.com/m8/feeds/contacts/default/full', dataType: 'jsonp', data: { access_token: token, max-results: '5000', alt: 'json' }, success:function(data){ ...

Delivering data via Ajax to MVC 4 Controller

Attempting to use Ajax for a simple pass. Both artID and v variables are correctly populated, but consistently encountering an Ajax error. Controller: Article Method: SaveRating Ajax script: $.ajax({ type: "POST", ...

JavaScript function failing to validate password

While engaging in an online game where the objective is to uncover a password by inspecting the page source or element, I encountered a puzzling line: if(el.value == ""+CodeCode+""). My assumption is that el.value represents my guess, and it indicates that ...