Add href to a button in Pug without breaking a form

Question

I'm trying to make my button href to my /leaderboard page after my quiz app submits.

    h1 Play Time 4 Trivia!
    button Go
    
    form(method='POST')
        ul
            each val in questions
                li
                    div
                        label= val.Question
                            select(name=val.QuestionId)
                                option(value='true') True
                                option(value='false') False

        button(type="submit") Submit

how would I go about having my submit button also redirect to another page without breaking my form submit?

If all you're trying to do is redirect the user, you can just manipulate the `window.location` object, e.g. `button(type="submit", onsubmit="window.location.href = "/leaderboard")`, more info on redirecting users [here](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage). Even if you're handling the button submit in a separate js file you can still use window.location.href to redirect the url somewhere else — isaac.g, Aug 17 '22 at 06:13

score 1 · Accepted Answer · answered Aug 23 '22 at 02:54

You shouldn't be doing this on the client side.

Say your form has action="/trivia", then at your Express server, assuming router is your Express app or a Router object:

router.post("/trivia", (req, res) => {
  // process the answers submitted in req.body
  // then when done:
  res.redirect("/leaderboard");
});

The above also has the advantage that if the user refreshes the page, the form is not submitted another time.

Add href to a button in Pug without breaking a form

1 Answers1