I am on a shopping cart project and I am on the form part where I have to validate a form by the back-end which sends me back a response that generates an order number that I have to display afterwards in another html page locally,

It works very well however the redirection is not done when I press the send button except that I want to execute this redirection when I click on the button,

I want to specify that I use the method async and await in a promise (I am not yet familiar with these methods) so I wondered if it was possible to do the redirection at the time or the form is sent to the back-end or simply reduce the time of the promise?

I tried to use an if that check if the response have the 201 status then it redirect to the confirmation page with the order Id :

requetePostVersLapi.then(async(res)=>
{
          
            let numeroDeCommande = await res.json()
        // If the request is accepted and the form send then redirect to confirmation.html
            if(res.status == 201)
            {
                  window.location.href=`confirmation.html?orderId=${numeroDeCommande.orderId}`
            // window.location.href=`confirmation.html?orderId=${numeroDeCommande.orderId}`=*
      }
// Quand le formulaire est envoyé...
myForm.addEventListener('submit',(e)=>
{

 
      const firstNameInput = document.getElementById('firstName')
      const lastNameInput = document.getElementById('lastName')
      const addressInput = document.getElementById('address')
 
      const cityInput = document.getElementById('city')
      const emailInput = document.getElementById('email')
      
      
   
      let RegexName =  new RegExp(/^[a-zA-z-\s] $/)
      let RegexCity =  new RegExp(/^[a-zA-z-\s] $/)
      let RegexAdress = new RegExp(/^[a-zA-z-\s] $/)
      let RegexEmail = new RegExp(/^\w ([\.-]?\w )*@\w ([\.-]?\w )*(\.\w{2,3}) $/)

      
        
              

      const checkFirstName = function ()
      {
          const firstNameErrorMsg = document.getElementById('firstNameErrorMsg')

            if(RegexName.test(firstNameInput.value) === false)
            {
                  firstNameErrorMsg.innerHTML = "Veuillez uniquement saisir des lettres"
                   e.preventDefault()
            }

            else if (RegexName.test(firstNameInput.value) === true){
                  firstNameErrorMsg.innerHTML = " ";
            }
      }
  


      const checkLastName = function()
      {
            const lastNameErrorMsg = document.getElementById('lastNameErrorMsg')

           if(RegexName.test(lastNameInput.value) === false)
           {
            lastNameErrorMsg.innerHTML = "Veuillez uniquement saisir des lettres"
            e.preventDefault()

           }

           else if (RegexName.test(lastNameInput.value) === true){
                 lastNameErrorMsg.innerHTML = " ";
           }

      }
      


      const checkAddress = function ()
      {
            const addressErrorMsg = document.getElementById('addressErrorMsg')

            if(RegexAdress.test(addressInput.value) === false)
            {
                  addressErrorMsg.innerHTML = "L'adresse saisi est incorrecte"
                  e.preventDefault()
            }

            else if(RegexAdress.test(addressInput.value) === true){
                  addressErrorMsg.innerHTML = "";
            }
            
          
      }



      const checkCity = function () 
      {
            const cityErrorMsg= document.getElementById('cityErrorMsg')

            if(RegexCity.test(cityInput.value) === false)
            {
                  cityErrorMsg.innerHTML = "Veuillez saisir un nom de ville correcte"
                  e.preventDefault()
            }

            else if(RegexCity.test(cityInput.value) === true){
                  cityErrorMsg.innerHTML = "";
            }
     
          
      }

     

      const checkEmail = function () 
      {
            const emailErrorMsg= document.getElementById('emailErrorMsg')

            if(RegexEmail.test(emailInput.value) === false)
            {
                  emailErrorMsg.innerHTML = "Veuillez saisir une adresse mail correcte"
                  e.preventDefault()
            }

            else if(RegexCity.test(emailInput.value) === true){
                  emailErrorMsg.innerHTML = "";
            }
    
      }

     


      checkFirstName()
      checkLastName()
      checkAddress()
      checkCity()  
      checkEmail()  
   
     
}) 

           

// /**END OF FORMULAIRE */

})

<form method="get" >
                <div >
                  <label for="firstName">Prénom: </label>
                  <input type="text" name="firstName" id="firstName" required>
                  <p id="firstNameErrorMsg"><!-- ci est un message d'erreur --></p>
                </div>
                <div >
                  <label for="lastName">Nom: </label>
                  <input type="text" name="lastName" id="lastName" required>
                  <p id="lastNameErrorMsg"></p>
                </div>
                <div >
                  <label for="address">Adresse: </label>
                  <input type="text" name="address" id="address" required>
                  <p id="addressErrorMsg"></p>
                </div>
                <div >
                  <label for="city">Ville: </label>
                  <input type="text" name="city" id="city" required>
                  <p id="cityErrorMsg"></p>
                </div>
                <div >
                  <label for="email">Email: </label>
                  <input type="email" name="email" id="email" required>
                  <p id="emailErrorMsg"></p>
                </div>
                <div >
                  <input type="submit" value="Commander !" id="order">
                </div>
              </form>

I'm working with API so the HTML doesn't work it just to show you that the get method is use to recover data in url then to send it to the back-end to get the orderId

CodePudding user response：

As my website and network window was open a gap give me the illusion that the request was delayed , I just close the network window where we can check the status of request and it works