What is the best way to modify CSS and HTML with a post request?

I'm currently in the process of working on a webpage with multiple sections. One section includes a form that sends a POST request. Once this form is successfully submitted, I want to update the CSS style of another element to make it visible.

Given that the submit event occurs server-side (using node.js), how can I establish communication between this file and the CSS/HTML? My goal is to avoid sending an entirely new page and simply make slight updates to the existing one.

app.post("/section-2", function(req, res) { 
  console.log(req.body);
  authorizeAndExecute(findOpenDataRow);

  res.send("<style>.section-2-next{visibility:visible}</style>")
});

The provided example demonstrates an attempt I made, but it ends up clearing the entire page. I also experimented with jQuery, but it's evident that the server doesn't have the same connection to HTML as a regular JavaScript file does.

EDIT: Here is some of the HTML related to the form and the element whose style I aim to modify:

<form action="/section-2" method="POST">
    <button type="submit" class="btn btn-primary btn-lg section-2-submit">Submit</button>
    <button class="btn btn-success section-2-next" type="button" name="button">Continue</button>
</form>

Answer №1

To enhance your webpage's appearance after a POST request, consider utilizing ajax on the client side. For instance, with jQuery, you can implement the following syntax:

$('.form-submit').click((e) => { // Triggers when submit button is clicked
  e.preventDefault(); // Stops page from redirecting
  $.post('/update-section', { data1: value1, ... }) // Sends POST request with parameters
  .done((res) => { // Executes on response
    $('.updated-section').css('display', 'block'); // Modifies styling dynamically
  })
})

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

What is the method for obtaining the hostname of a socket?

Whenever a specific event is received from a connected socket, I need to send a request with my hostname and port as parameters. I had hoped to access this information directly from the socket object. However, due to the lack of documentation, I am unable ...

Encountered an issue while trying to install ngrx store with Angular 13 - unable to resolve the dependency

Encountering an error with the following command: ng add @ngrx/store@latest The error message reads as follows: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-prot ...

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

Error when compiling TypeScript: The callback function provided in Array.map is not callable

This is a Node.js API that has been written in Typescript. app.post('/photos/upload', upload.array('photos', 12), async (req, res) => { var response = { } var list = [] try { const col = await loadCollection(COLLECTION_NAM ...

Strange characters are appearing when I communicate between Intel Edison and NodeJS via serial port

I have connected an FTDI device to my computer, with the FTDI then connected to an Intel Edison Arduino breakout board using the 0RX and 1TX pins. Here is the serial pin hookup: Edison TX ------> FTDI RX Edison RX ------> FTDI TX To manage the ...

Execute a node script file at random intervals

I've been utilizing forever to maintain the continuous execution of a node script: forever start script1.js However, my requirement is to run these files in a random order... For instance: Execute node script1.js Execute node script2.js Run script ...

How to customize the appearance of an HTML checkbox using custom images for a unique

Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...

Troubleshooting: Why Files are Not Being Served by

I have noticed that there have been similar questions asked about this topic before, but I couldn't find a solution to my problem by reading the responses. I am trying to get my Node.js app to serve my files, and it seems like the page is correctly r ...

Exploring the functionalities of can-deactivate without incorporating routing

I'm facing an issue with a parent component and multiple child components. The parent component contains a form, while each child component also has its own form. Unfortunately, all child components share the same route as the parent component and hav ...

The specified timeout elapsed without the jasmine async callback being invoked

Having recently ventured into Protractor and javascript, I've encountered a persistent error that none of the existing solutions seem to shed light on. The issue revolves around understanding async callbacks within my Page Object model implementation. ...

Prevent content from occupying unnecessary space below a sticky div

When the "link" on the sticky header is clicked in this scenario, how can I ensure that the linked content item (#mypara) appears below the sticky div rather than directly underneath it where it may be hidden? $(document).ready(function() { $(window ...

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties

My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...

Issue encountered while attempting to send an HTML file using express.js

I have been trying to display an HTML file using Express.js with a static __dirname, but the HTML content does not show up after calling localhost/ var express = require('express'); var web = express(); ...

Should PHP be avoided in CSS files?

I've recently developed a CSS page named style.php and at the beginning, I included this line: <?php header("Content-type: text/css"); ?> What are your thoughts on this approach? Is it considered a bad idea? The reason behind doing this is tha ...

How can I retrieve the width of a responsive React element during its initial rendering phase?

In my React project, there is a component called ResultList which is used to display products in a gallery format. The challenge I'm facing is determining the appropriate number of products to show per row based on the available width for the ResultL ...

Issue with Express.js and EJS application: The edit form fails to display the current category of the post

I've been developing a blogging application using Express, EJS, and MongoDB. You can check out the GitHub repository by clicking on the link. Within my application, I have separate collections for Posts and Post Categories. One issue I'm encoun ...

Making the most of Material Design icons in MaterializeCSS: A step-by-step guide

I am looking to customize my mdi icons by adding my own set of icons into custom classes. The existing mdi classes do not match my requirements. Is there a way for me to add these icons and use them just like the default ones? <i class="mdi-image-face ...

Locking mat-toolbar and mat-tabs to the top in Angular Material 2

As I work on my website, my goal is to fix the < Mat-Toolbar > at the top of the screen and then directly underneath that, lock the < Mat-Tabs >. The challenge I'm facing is that the position: fixed in CSS is not working as expected. When ...

Analyzing various PHP $_POST keywords for validation

Currently, I am facing an issue with a page where a script is supposed to check if the POST request contains a certain keyword when a link is called. However, no matter how I arrange the code, it does not seem to work as expected. <?PHP if($_POST[&apo ...

The MEAN stack consistently shows an error message of 'Invalid password' whenever a user attempts to log in

I have been working on creating a user login system in node.js with mongoose and MongoDB. Everything works fine when registering new users, but after a few successful logins, an error stating "Invalid password" starts to appear. I would appreciate any assi ...