Form method="post" in vue cannot POST

Question

I'm trying to make a site that lets users reserve a seat with a given password and time period. I made a form where the user should input the password and their name and then submit the form to make the reservation. The problem I have is that if I use a get method in the form it adds a ? to the URL which I don't want. After clicking the button it should simply create an entry in the database and redirect the user to the HomeView. To get around the ? problem I figured using a post method in the form, but if I do that I keep getting the error "Cannot POST /". I searched far and wide and apparently I have to somewhere specify the post, but where?

<form @submit="reserve" method="post" action="">
   <fieldset>
    <div class="mainmiddle">
      <a id="Header">Wählen Sie Ihre Einstellungen für die Reservierung:</a>
      <div id="settings" v-bind:key="this.$seat.seat.seatNumber">
        <a id="seatNumber">Sitz-Nummer: {{ this.seatNumber }}</a><br>
        <div id="time">
          <label for="daySuggestion">Tag:</label>&nbsp;
          <input v-on:click="setMinDateToday" v-model="dateOfReservation" type="date" id="daySuggestion">
          <label for="fromSuggestion">Von:</label>&nbsp;
          <input v-model="startTimeOfReservation" type="time" id="fromSuggestion">
          <label for="untilSuggestion">Bis:</label>&nbsp;
          <input v-model="endTimeOfReservation" type="time" id="untilSuggestion">
        </div>
        <input id="password" placeholder="Passwort" type="password" v-model="password" v-on:keyup="validatePassword" required/><br>
        <div id="passwordDiv">
          <input id="passwordAgain" placeholder="Passwort wiederholen" type="password" v-model="passwordAgain" v-on:keyup="validatePassword" required/>
          <span id='message'></span>
          <input id="showPassword" type="checkbox" v-on:click="showPassword"/>&nbsp; Passwort anzeigen
        </div>
        <label id="anonymLabel">Anonym reservieren:</label>
        <input id="anonym" type="checkbox" v-model="anonym"><br>
        <input id="nameReservingPerson" type="text" placeholder="Name..." v-model="nameReservingPerson" required/>

      </div>

      <div id="footer">
        <button type="submit" class="bottomButtons">Jetzt Reservieren</button>
        <button class="bottomButtons" v-on:click="goPrev">Abbrechen</button>
      </div>
    </div>
  </fieldset>
</form>

And this is my reserve method that gets called when the form is submitted

reserve() {
      axios.post(`${config.apiBaseUrl}/seat/reserve/`,
          {
            seatNumber: this.seatNumber,
            password: this.password,
            anonym: this.anonym,
            nameReservingPerson: this.nameReservingPerson,
            reservedAt: {
              fromDate: Date.parse(this.dateOfReservation +" "+ this.startTimeOfReservation),
              untilDate: Date.parse(this.dateOfReservation +" "+ this.endTimeOfReservation),
            }
          },
          {
            headers: {
              'Content-Type': 'application/json',
              'Character-Encoding': 'utf-8',
            }
          }
      )
          .then(() => {
            alert("Der Platz wurde Erfolgreich Reserviert!")
            this.$router.push({path: '/'});
          })
          .catch(() => {
            alert("Der Platz wurde !NICHT! Erfolgreich Reserviert!")
          });
    },

Everything kind of work already with a get method in the form, but I just can't get around the ? problem. How can I get the post method form to work?

This is standard browser <form> submission. Without method="post" it defaults to method="get", which appends the form values to the URL. You're using axios though, so you want neither, which means you need to prevent the standard form submission. Use reserve(e) { and call e.preventDefault(); right after. (it kind of works with get because the get method in combination with a blank action causes a reload of the page) — user5734311
– user5734311, Commented Jan 7, 2022 at 14:47
Oh my Lord you're a lifesaver, I tried all kinds of things for hours and it was this simple haha. I can't thank you enough honestly — Mar Lau
– Mar Lau, Commented Jan 7, 2022 at 14:58

Peter Pointer · Accepted Answer · 2022-01-07 15:16:38Z

1

You are using the default HTML form submission. The POST method is used to send the form data to a server.
None of that is needed when you are using JavaScript, especially Axios.

The submit handler takes the event argument which you should use to prevent the automatic HTML submission:

event.preventDefault()

After that, you can do your magic with any HTTP library.

edited Jan 7, 2022 at 15:16

Peter Pointer

4,2212 gold badges21 silver badges40 bronze badges

answered Jan 7, 2022 at 14:58

mrgatos

1461 gold badge2 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mar Lau Over a year ago

Thank you, the preventDefault solved everything. I can't believe it was this easy

user5734311 Over a year ago

Please check for duplicates before posting an answer. This question is definitely a dupe.

Collectives™ on Stack Overflow

Form method="post" in vue cannot POST

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related