CSS Not Rendering After A Post Submit Using Express

user_5007729 0
Viewed 34

I was able to get the CSS loaded on the initial page of the get, but when I use a button to submit data using POST, The post works, but the CSS fails to load and the screen is just plain with post info. here is some info below

app.use(express.static(__dirname + "/public")); 

app.get('/', (req,res)=>{
    
    res.sendFile(__dirname + "/index.html")
})

The HTML

<form action="/" method="post">
    <input type="text" name="n1" placeholder="First Number">
    <input type="text" name="n2" placeholder="Second Number">
    <button type="submit" name="submit">Calculate</button>

</form>

The post

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

    var num1 = Number(req.body.n1); 
    var num2 = Number(req.body.n2);

    var result = num1 + num2;

    res.send("The result is " + result);
})

Page loads background color fine, but when I hit the calculate button is when CSS doesn't load. Just wondering what else I'd need to do to make CSS appear everywhere?

express css javascript
2 Answers

On the initial GET request, aside from the form part, you are probably responding with a static html file that in turn references css files.

That's not the case when you hit the "Calculate" button. On that POST request you are responding with plain text ("The result is x"), not HTML, and that doesn't reference any styles whatsoever.

You may want to look into some templating engine like Handlebars, EJS, or something more flexible like Vue, Svelte, React or Angular.

user_76492950

If you want to send a styled html file in your POST request, you need to use res.sendFile()

Your post request is only sending back the result with the number.

Because you need to specify absolute file paths, you should write it as below.

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

    var num1 = Number(req.body.n1); 
    var num2 = Number(req.body.n2);

    var result = num1 + num2;

    res.sendFile('public/index.html' , { root : __dirname});
})

This will get you the styled html, but you will need to write some JavaScript to change the html based on the output.

in jQuery, it might look like

$("h1").text(`The result is ${result}`);

Your jQuery will need to be on a client side JS file.

I recognise that from Angela Yu's course - you may want to wait until you complete the EJS module to do what you're doing.

user_195185930
Related