Extracting information from a recordset and displaying it in an HTML division

Currently, I am developing an Inventory Manager system to keep track of a variety of fishing equipment. Through HTML forms, I am able to input data into a SQL server database. My goal is to load data from a select statement into a specific div on my index.html page. To achieve this, I am utilizing Node.js and Express to facilitate communication between the HTML interface and the SQL server.

index.html

 
        <!DOCTYPE html>
        <html lang="en">

        <head>
            <meta charset="utf-8">
            <title>Fishing Inventory</title>
        </head>

        <body>
            <div class="navbar">
                <a href="AddPerson.html">Add New Person</a>
                <a href="AddHook.html">Add New Hook</a>
                <a href="AddSoftPlastic.html">Add New Soft Plastic</a>
                <a href="AddRod.html">Add New Rod</a>
                <a href="AddReel.html">Add New Reel</a>
                <a href="AddLine.html">Add New Line</a>
                <a id="SeeHooks">See Hooks</a>
                <a id="SeeSP">See Soft Plastics</a>
                <a id="SeeRods">See Rods</a>
                <a id="SeeReels">See Reels</a>
                <a id="SeeLine">See Line</a>
            </div>

            <div class="mainHeader">
                <h1>Fishing Inventory Manager</h1>
            </div>

            <div class="DBcontainer">
                <form action="/" method="POST">
                    /* On button click, I want the recordSet to be displayed in this div */
                    <input type="submit" value="Submit"></input>
                </form>
            </div>

        </body>

        </html>

        <style>
            body {
                background-color: black;
            }
			/* CSS styles omitted for brevity */

        </style>
     

server.js

 
        // Server-side JavaScript code handling requests and interactions with SQL database
        // Code snippet provided here for reference
        
     

Note: For security reasons, the actual server name, username, and password have been altered in the code snippet above.

Answer №1

one thought that comes to mind is to switch your 'select' route method from post to get...

for example:

app.post('/', function (req, res) {

could be changed to

app.get('/person', function (req, res) {

then include a script on your page that calls the person route and fills a designated area with the returned data.

<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var person = xhttp.responseText;
    var element = document.getElementById("PersonContainer");
    person.forEach(function(item, index) {
      element.innerHTML += '<li><p>' + item.name + '</p></li>'
    });
  }
};
xhttp.open("GET", "/person", true);
xhttp.send();
</script>

make sure the 'PersonContainer' element is present on your page...

<div id='PersonContainer'></div>

it's important to note that the code above is basic and can be improved, but it should help guide you in the right direction...

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

Is it possible to embed hyperlinks directly into JSON data?

In the process of creating a proof of concept for my personal hypertextual blog project, I utilized expressjs and stored the blog data in a JSON file. The structure of the JSON file includes: { "id": 1, "name_kanji": &qu ...

SQL tooling cannot be used to query an existing Ignite cache

My goal is to retrieve data from an Apache Ignite cache (version 2.2) that I have set up using a Java script: TcpDiscoverySpi spi = new TcpDiscoverySpi(); TcpDiscoveryVmIpFinder ipFinder=new TcpDiscoveryMulticastIpFinder(); List<String> ...

When implementing the Slick Carousel with autoplay within an Isotope grid, the height of the image slides may occasionally reduce to 1 pixel when applying filters

I've been struggling with this issue for more than a day now, and despite searching through similar posts and trying their solutions, I still haven't been able to resolve it. Here's an example of the problem: https://jsfiddle.net/Aorus/1c4x ...

What could be causing the excessive number of connections in my MongoDB instance?

This code snippet is crucial for my initial connection setup let cachedDbConnection: Db export async function establishDatabaseConnection(): Promise<{ db: Db }> { if (cachedDbConnection) { return { db: cachedDbConnection } } const client ...

What could be the reason for the <ul> and <li> tags showing up on my website's DOM?

I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below: <div class="app"> <h1> All Fishes and Their Photos</h1> <ul v-for="(fi ...

Directional CSS box-shadow styling

I need to create a design that features cascading shadows. Here's my attempt: box-shadow: -6px 0px 10px #514E49 However, the shadow appears in the opposite direction. Adjusting the h-shadow parameter to 6px results in the shadow only being visible ...

Aligning a 900px wide element with an orange background on the left and a white background on the right

I have a section on my website that I want to position in the center of the screen. It's a simple task, but I have a specific design in mind. I want the left side of the section to have an orange background, while the right side should be white. I&apo ...

angular trustAsHtml does not automatically insert content

Two divs are present on the page. Upon clicking button1, an iframe is loaded into div1. The same applies to button2 and div2. These iframes are loaded via ajax and trusted using $sce.trustAsHtml. This is how the HTML looks: <div ng-bind-html="video.tru ...

Creating Fixed/Sticky Headers for Tables within Tabs in Bootstrap 4

I'm working on a website using Bootstrap 4 and it features multiple tabs with different tables, some of which contain a large amount of data. I am looking to implement a feature where the table header remains fixed at the top of the page as the user s ...

The <ul> tag is not receiving the correct styles and is not displaying properly

I have successfully integrated an input control and button into my table within the Angular 7 application. When a user inputs text in the control and clicks the add button, the text is appended to the <ul> list. However, the layout of the <ul> ...

Using Satellizer.js to log off

Can anyone help me solve a problem I'm facing? I am currently using Satellizer for logins, and I have successfully logged in with Google, obtained a token, but when I try to sign out, the token is deleted but I remain signed in on Google. For example, ...

Ensuring that a nested div adjusts responsively within a static parent container

I am working on a project that involves HTML, CSS, and JS code. Here is the structure of my code: HTML: <div id="blockcart-wrapper"> <div class="blockcart cart-preview"> <div class="header"> <a rel="nofollow" href="#"> ...

How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Is there a way to make the navigation bar appear only when a user has scrolled down to the second div on the page? The first div is the header. I am wondering how this can be achieved using jQuery? <!DOCTYPE html> <html> <head> <me ...

What is the best way to showcase an image on a server for an HTTPS client?

When the server (Express) is working on port 4000, there is an image located at /public/image.png Setting up Express Static File Serving has been completed The client (Next.js) is running on port 3000 During local testing, <image src="http://loca ...

Need assistance with the Angular polyfill.ts file? Wondering where to place the polyfill code and how to manage it effectively?

Currently encountering an error in my Angular project that requires some 'polyfilling'. Due to the restriction on editing webpack.config.js directly, it seems necessary to work with the polyfill.ts file instead. The issue lies in the fact that An ...

Error: The query has already been processed:

I'm encountering an issue while attempting to update the document. The error message indicates that the query has already been executed. MongooseError: Query was already executed: footballs.updateOne({ date: 'January 4' }, {}) app.post(& ...

Reveal the MongoDB database connection to different sections within a Next.js 6 application

Currently developing an application using Next.js v6, and aiming to populate pages with information from a local mongodb database. My goal is to achieve something similar to the example provided in the tutorial, but with a twist - instead of utilizing an ...

Issue with displaying a personalized error message using the error handling middleware on Express.js

The code I have seems to have an error handling middleware that should be called when localhost:3000 is opened on the browser. However, instead of getting the response 'system is unavailable for the moment', I receive the error message "my custom ...

Connecting the SignalR client to various servers

I am currently incorporating SignalR version 2.x into my ASP.Net MVC application, which is also using the same version of SignalR in my Angular client app. The ASP.Net MVC application is hosted at http://localhost:42080, while the Angular app is hosted at ...

ASP.NET Dynamic Slideshow with Horizontal Reel Scrolling for Stunning

I'm curious if there is anyone who can guide me on creating a fascinating horizontal reel scroll slideshow using asp.net, similar to the one showcased in this mesmerizing link! Check out this Live Demo for a captivating horizontal slide show designed ...