How do I make a form redirect you after submitting the form with required inputs

Question

I have a HTML JS form for a contact form on my website, but I want it to redirect to a thank your page after the submit button is clicked. I can do that on it's own, but it happens every time I click the button, but I only want it to happen when the required areas are filled in.

I have tried an action tag on the form btw, it doesn't work for some reason.

Code (full screen it too see the button) :

document.getElementById("submit").onclick = function () {
  location.href = "/contactty.html";
};

    .cntct-bg {
        background-color: #4158D0;
        background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        overflow: hidden;
    }

    .contact-cont {
        position: absolute;
        top: 6%;
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 1;
    }

    form {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        padding: 2vw 4vw;
        width: 90%;
        max-width: 600px;
        border-radius: 10px;

        z-index: 1;
    }

    form h1 {
        color: #555555;
        font-weight: 800;
        margin-bottom: 20px;
        font-family: var(--black);

        z-index: 1;
    }

    form input,
    form textarea {
        border: 0;
        margin: 10px 0;
        padding: 20px;
        outline: none;
        background: #f5f5f5;
        font-size: 16px;
        font-family: var(--medium);

        z-index: 1;
    }

    form textarea {
        min-width: 93.33%;
        max-width: 93.33%;
        min-height: 80px;

        z-index: 1;
    }

    form button {
        padding: 15px;
        background: #ff5361;
        color: #ffffff;
        font-size: 18px;
        border: 0;
        outline: none;
        cursor: pointer;
        width: 150px;
        margin: 20px auto 0;
        border-radius: 30px;
    
        z-index: 1;
    
        box-shadow: 0px 8px 0px #a83740;
    }
    
    .form button:active {
        box-shadow: none;
        transform:  translateY(8px);
    }

<body class="cntct-bg">
  <div class="contact-cont">
    <form action="/contactty.html" id="contact-form">
      <h1>Get in touch</h1>
      <input type="hidden" name="contact_number">
      <input type="text" name="user_name" placeholder="Your Name" required>
      <input type="email" name="user_email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Whats on your mind?" required></textarea>
      <div class="tscheck">
        <input type="checkbox" id="tsy" name="tsy" value="agreed" required>
        <label for="tsy">Accept the <span><a href="/tos.html">terms of service</var></a></span></label>
      </div>
      <button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
    </form>
  </div>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

Nexo · Answer 1 · 2022-07-08T18:45:44.250

checkAllInput() is validatind data.
I have selected all inputs and then looping through them and validating if (input.value == null || input.value == "") weather it's empty or not.

document.getElementById("submit").onclick = function() {
  if (checkAllInput()) {
    location.href = "/contactty.html";
  }
};

function checkAllInput() {
  const inputs = document.querySelectorAll("input");
  inpputs.forEach(input => {
    if (input.value == null || input.value == "") {
      alert("please enter all data");
      return false;
    } else {
      return true;
    }
  })
}

.cntct-bg {
  background-color: #4158D0;
  background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  overflow: scroll;
}

.contact-cont {
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: scroll;
}

form {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 2vw 4vw;
  width: 90%;
  max-width: 600px;
  border-radius: 10px;
  z-index: 1;
}

form h1 {
  color: #555555;
  font-weight: 800;
  margin-bottom: 20px;
  font-family: var(--black);
  z-index: 1;
}

form input,
form textarea {
  border: 0;
  margin: 10px 0;
  padding: 20px;
  outline: none;
  background: #f5f5f5;
  font-size: 16px;
  font-family: var(--medium);
  z-index: 1;
}

form textarea {
  min-width: 93.33%;
  max-width: 93.33%;
  min-height: 80px;
  z-index: 1;
}

form button {
  padding: 15px;
  background: #ff5361;
  color: #ffffff;
  font-size: 18px;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 150px;
  margin: 20px auto 0;
  border-radius: 30px;
  z-index: 1;
  box-shadow: 0px 8px 0px #a83740;
}

.form button:active {
  box-shadow: none;
  transform: translateY(8px);
}

<body class="cntct-bg">
  <div class="contact-cont">
    <form action="/contactty.html" id="contact-form">
      <h1>Get in touch</h1>
      <input type="hidden" name="contact_number">
      <input type="text" name="user_name" placeholder="Your Name" required>
      <input type="email" name="user_email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Whats on your mind?" required></textarea>
      <div class="tscheck">
        <input type="checkbox" id="tsy" name="tsy" value="agreed" required>
        <label for="tsy">Accept the <span><a href="/tos.html">terms of service</var></a></span></label>
      </div>
      <button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
    </form>
  </div>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

could you please explain me what do you mean by doesn't redirect if all data is in form? — Nexo, Jul 08 '22 at 18:44
I guess it was css problem you was not able to enter name in my solution, Now I havechange css you can try it gain — Nexo, Jul 08 '22 at 18:46

score 0 · Answer 2 · answered Jul 08 '22 at 18:50

I hope it's work for you

document.getElementById("submit").onclick = function () {
var count = 0;
var len = document.querySelectorAll('[required]').forEach(current=> {
  if(current.value == ''){ count = count + 1;}
});
if(count == 0){
  window.location.href = "/contactty.html";
}
  };

    .cntct-bg {
        background-color: #4158D0;
        background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
        overflow: hidden;
    }

    .contact-cont {
        position: absolute;
        top: 6%;
        width: 100%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 1;
    }

    form {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        padding: 2vw 4vw;
        width: 90%;
        max-width: 600px;
        border-radius: 10px;

        z-index: 1;
    }

    form h1 {
        color: #555555;
        font-weight: 800;
        margin-bottom: 20px;
        font-family: var(--black);

        z-index: 1;
    }

    form input,
    form textarea {
        border: 0;
        margin: 10px 0;
        padding: 20px;
        outline: none;
        background: #f5f5f5;
        font-size: 16px;
        font-family: var(--medium);

        z-index: 1;
    }

    form textarea {
        min-width: 93.33%;
        max-width: 93.33%;
        min-height: 80px;

        z-index: 1;
    }

    form button {
        padding: 15px;
        background: #ff5361;
        color: #ffffff;
        font-size: 18px;
        border: 0;
        outline: none;
        cursor: pointer;
        width: 150px;
        margin: 20px auto 0;
        border-radius: 30px;
    
        z-index: 1;
    
        box-shadow: 0px 8px 0px #a83740;
    }
    
    .form button:active {
        box-shadow: none;
        transform:  translateY(8px);
    }

<body class="cntct-bg">
  <div class="contact-cont">
    <form action="/contactty.html" id="contact-form">
      <h1>Get in touch</h1>
      <input type="hidden" name="contact_number">
      <input type="text" name="user_name" placeholder="Your Name" required>
      <input type="email" name="user_email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Whats on your mind?" required></textarea>
      <div class="tscheck">
        <input type="checkbox" id="tsy" name="tsy" value="agreed" required>
        <label for="tsy">Accept the <span><a href="/tos.html">terms of service</var></a></span></label>
      </div>
      <button type="submit" id="submit" name="submit" onclick="submit()">Send</button>
    </form>
  </div>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
</body>

score 0 · Answer 3 · answered Jul 08 '22 at 19:01

I hope using java script function will help you out. For the all kinds of validation we can use JQuery to make it smoother and faster(please find out more from the link https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script#:~:text=you%20can%20use%20jquery%20validator,form. )

Hope this will help you :-).

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

<form name="myForm" action="action_to_be_taken" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

How do I make a form redirect you after submitting the form with required inputs

3 Answers3