0

I'm trying to make a calculator for calculating the volume and area of a square. BUT when I submit the form, I get "Cannot POST /square_volume" or "Cannot POST /square_area" How to solve it ? (please help me because this is a school group project and i'm the only one who working on this thing)

This is my HTML form for calculating square volume (square_volume.ejs)

<% if (!locals.data) { %>
<form method="post" action="/square_volume">
    <label><p>Square Width : </p></label>
    <input type="number" name="square_width" step="any"></input>
    <label><p>Square Length : </p></label>
    <input type="number" name="square_length" step="any"></input>
    <label><p>Square Height : </p></label>
    <input type="number" name="square_height" step="any"></input>
    <button class="submitButton">Calculate</button>
</form> <br>
<% } else { %>
        <p>Square Width : <p><%= square_width %></p></p>
        <p>Square Length : <p><%= square_length %></p></p>
        <p>Square Height : <p><%= square_height %></p></p>
        <h1>Square Volume : <p><%= square_volume %></p></h1>
        <button onclick="history.back()">Calculate Again</button>
<% } %>

And this is my JavaScript server, using Node.js, Express, EJS (app.js)

// PAGES
app.get('/', (req, res) => {
    res.render('shapes_selection')
})
app.get('/square_selection.ejs', (req, res) => {
    res.render('square_selection')
})
app.get('/square_volume.ejs', (req, res) => {
    res.render('square_volume')
})
app.get('/square_area.ejs', (req, res) => {
    res.render('square_area')
})

//CALCULATIONS
if (typeof square_width != 'undefined') {
    app.all('square_volume', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_width) {
            data = {
                data: true,
                square_width: form.square_width,
                square_length: form.square_length,
                square_height: form.square_height,
                square_volume: numberWithCommas(parseFloat(form.square_width) * parseFloat(form.square_length) * parseFloat(form.square_height))
            }
        }
        res.render('square_volume', data)
    })
} else if (typeof square_side1 != 'undefined') {
    app.all('square_area', (req, res) => {
        let form = req.body
        let data = {}
        if (form.square_side1) {
            data = {
                data: true,
                square_side1: form.square_side1,
                square_side2: form.square_side2,
                square_area: numberWithCommas(parseFloat(form.square_side1) * parseFloat(form.square_side2))
            }
        }
        res.render('square_area', data)
    })
}

If I do something dumb you can blame me.

QactuzS
  • 1
  • 1
  • 1
    `if (typeof square_width != 'undefined') {` looks like it is false, so you never add the end point handler. – Quentin Dec 07 '22 at 15:16
  • Why are you checking for `square_width` value outside of your handler? As the code stands, `square_width` and `square_side1` are `undefined` and these routes are not available. Also, you should probably use `app.post` instead of `app.all`; the handler will not work if a get request is sent with the body as URL arguments. – Abrar Hossain Dec 07 '22 at 15:20

0 Answers0