I have a form in a modal window, which makes a POST to an API on the server, and then the server saves the information in the DB. The server is made with Node Js and express. The problem is that when submitting, the API IP address is opened, and what I need is for the main page of my application to be reloaded. Also, how do I capture the response from the server if the operation was successful or there was an error... here is the frontend code:
<form action = {apiUrl} method = "POST">
<div className = "booking-checkOut">
<label >Check Out: </label>
<input type = "date" min = {minDate} name = "checkOut" required />
</div>
<div className = "booking-pasajero">
<input name = "idPasajero" placeholder = "Nro identificacion" />
<input name = "pasajero" placeholder = "pasajero" required/>
<input type="email" placeholder ="email" />
<input name = "nacionalidad" placeholder = "nacionalidad" />
</div>
<div className = "booking-booking">
<p>Datos de la Reserva</p>
<input type = "number" name = "cantPas" placeholder = "Cantidad de Pasajeros" min = "1" required/>
<input type = "number" name = "tarifa" placeholder = "tarifa" step = "0.01" min = "10" required/>
<textarea name = "observ" placeholder = "Observaciones"></textarea>
</div>
<input type = "hidden" name = "room" value = {props.data.roomNumb} />
<input type = "hidden" name = "checkIn" value = {props.data.checkIn} />
<input type = "hidden" name = "habitacionId" value = {props.data.roomID} />
<button type = "submit" className = "modal-btn primary">Confirmar</button>
</form>
<button
className = "Modal-close"
onClick={props.clickCerrar}
></button>
and on the server I have this route:
app.post(`${API_BASE}/new-booking`, (req, res) => {
data(req.body)
.then (pgdata => {
res.send("ok")
})
.catch(err => console.log(err))
}
that receives the data from the form and with the data function saves it in the database.
Cheers
What is happening is that you are making the request directly from the form, this can be done as long as the server makes a redirection. In this case, the most convenient thing is to make the request with JS, adding the following code to your page.
JS
HTML
to the button maybe you need to add e.preventDefault(); or maybe with the response from the server you need to do a validation on the client so that if it gives you the response you expect it can reload the page