How can I have a button redirect to another page, but still be able to do form validation in HTML?

Catzo _ Published at Dev

Catzo _

I'm trying to make a custom order form for this baking website I'm working on. I would like my submit button to redirect to another page once a user has completed the form. I also need the form to be verified too, so all the required information is there.

<div class="flexsetcustomorder">
    <div class="columnleftOrder"> <h2>Custom Order Form</h2> <br>
        <form class="customform" method="GET" target="_self">
          <fieldset>
            <legend>What would you like?</legend>
             <input type="radio" id="cake" name="good" value="cake" required>
             <label for="cake">Cake</label><br>
             <input type="radio" id="cupcake" name="good" value="cupcake">
             <label for="cupcake">Cupcakes</label><br>
             <input type="radio" id="cookie" name="good" value="cookie">
             <label for="cooie">Cookies</label><br><br>
             <textarea id="description" name="describearea" rows="3" cols="50" required> Describe what you'd like here.
             </textarea><br><br>
             <label for="password">Please enter your email:</label><br>
             <input type="email" id="email" name="email" required><br>
          </fieldset>
          <a href="thankyou.html"><button>Submit Order</button> </a>
        </form>
    </div>

Script Host

Here is the HTML code for your custom order form, with the submit button redirecting to another page and the form being verified:

// This function will be called when the user clicks the submit button.
function submitForm() {
  // Check to make sure that the user has entered all of the required information.
  // because of the "required" attributes the following if-condition will never be fulfilled:
  if (document.querySelector("[name=good]:checked").value === "" ||
      document.getElementById("description").value === "" ||
      document.getElementById("email").value === "") {
    alert("Please enter all of the required information.");
    return false;
  }

  // The form is valid, so redirect the user to the thank you page.
  console.log("moving on");
  // window.location.href = "thankyou.html";
}

// Attach the submitForm function to the submit event of the form.
document.querySelector(".customform").addEventListener("submit", submitForm);

<html>
<head>
  <title>Custom Order Form</title>
</head>
<body>
  <div class="flexsetcustomorder">
    <div class="columnleftOrder"> <h2>Custom Order Form</h2> <br>
        <form class="customform" method="POST" action="thankyou.html">
          <fieldset>
            <legend>What would you like?</legend>
             <input type="radio" id="cake" name="good" value="cake" required>
             <label for="cake">Cake</label><br>
             <input type="radio" id="cupcake" name="good" value="cupcake">
             <label for="cupcake">Cupcakes</label><br>
             <input type="radio" id="cookie" name="good" value="cookie">
             <label for="cooie">Cookies</label><br><br>
             <textarea id="description" name="describearea" rows="3" cols="50" required> Describe what you'd like here.
             </textarea><br><br>
             <label for="password">Please enter your email:</label><br>
             <input type="email" id="email" name="email" required><br>
          </fieldset>
          <button type="submit">Submit Order</button>
        </form>
    </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.