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 >
      <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" >Jetzt Reservieren</button>
        <button  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?

CodePudding user response：

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.