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

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 >
  <div >
    <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 >
        <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>

CodePudding user response：

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 >
  <div >
    <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 >
        <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>

CodePudding user response：

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 >
  <div >
    <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 >
        <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>

CodePudding user response：

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 can use jquery validator,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>