How to solve javascript redirection problem?

Question

I am trying to do client-side validation using javascript and all the things are working properly, only it doesn't redirect to another page -> redirect.html

After clicking on the alert pop-up it again loads the index.html.

document.getElementById('sub-btn').addEventListener('click', function() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sign Up</title>
</head>
<body>
    <div class="main">
        <div class="form-box">
            <form class="input">
                <input class="input-field" id="fname" placeholder="First Name" type="text">
                <input class="input-field" id="lname" placeholder="Last Name" type="text">
                <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
                <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
                <input class="input-field" id="email" placeholder="Email ID" type="email">
                <input class="input-field" id="password" placeholder="Enter Password" type="password">
                <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
                <button class="btn" id="sub-btn" type="submit">SIGN UP</button>
            </form>
        </div>
    </div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

No, leave it at `submit` and add `action="redirect.html" onsubmit="return yourvalidator()"`. There is no need to reinvent the wheel here. — JavaScript, Jul 10 '20 at 06:09
What should I write in place of "yourvalidator()" if I use addActionListner? @JavaScript — DigiLeon, Jul 10 '20 at 06:39

score 1 · Accepted Answer · answered Jul 10 '20 at 06:10

Referring the link button type submit/button

document.getElementById('sub-btn').addEventListener('click', function() {
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Sign Up</title>
</head>
<body>
    <div class="main">
        <div class="form-box">
            <form class="input">
                <input class="input-field" id="fname" placeholder="First Name" type="text">
                <input class="input-field" id="lname" placeholder="Last Name" type="text">
                <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
                <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
                <input class="input-field" id="email" placeholder="Email ID" type="email">
                <input class="input-field" id="password" placeholder="Enter Password" type="password">
                <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
                <button class="btn" id="sub-btn" type="button">SIGN UP</button>
            </form>
        </div>
    </div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>

score 0 · Answer 2 · answered Jul 10 '20 at 06:09

0

you need to add event preventdefault I think

answered Jul 10 '20 at 06:09

Omar Sy

486
2
8

I don't know what is event preventdefault. Can you explain a bit about it? – DigiLeon Jul 10 '20 at 06:45

score 0 · Answer 3 · answered Jul 10 '20 at 06:52

document.getElementById('sub-btn').addEventListener('click', function(e) {
e.preventDefault()
var firstName = document.getElementById('fname').value;
var lastName = document.getElementById('lname').value;
var yearBirth = document.getElementById('dob').value;
var phoneNum = document.getElementById('ph-no').value;
var emailID = document.getElementById('email').value;
var password = document.getElementById('password').value;
var rePassword = document.getElementById('re-password').value;

if (firstName.length === 0) {
    alert('Enter the first name!');
}else if (lastName.length === 0) {
    alert('Enter the last name!');
}else if (yearBirth.length === 0) {
    alert('Enter date of birth!');
}else if (phoneNum.length === 0) {
    alert('Enter the phone number!');
}else if (phoneNum.length > 10) {
    alert('Check phone number!');
}else if (emailID.length === 0) {
    alert('Enter the email ID !');
}else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
    alert('Enter the password!');
}else if (rePassword.length === 0) {
    alert('Re-enter the password!');
}else {
    alert('Redirecting to another page....');
    window.location = 'redirect.html';
}  });

score 0 · Answer 4 · answered Jul 10 '20 at 12:21

form already has a built in redirect functionality by using the attribute action which also provides the benefit of actually posting the data to the desired link, if required.

Furthermore form has an event onsubmit which gets executed before submitting the form and can be cancelled by returning false.

Since all the mentioned requirements for your code are already given by the default behaviour of form, there is less reason not to use it.

Here is what you would need to change:

Instead of defining a click event, you define a standalone validation function (=myValidator()), which returns true once all criterias are fulfilled and false until. This better good practise anyway, since you can call it independent of click events.
Setting the actionof the form to the desired URL (=redirect.html)
Forward the return of myValidator() to the onsubmit event on the form

function myValidator(){
  //REM: returns true once valid, false until.
  var tReturn = true;

  var firstName = document.getElementById('fname').value;
  var lastName = document.getElementById('lname').value;
  var yearBirth = document.getElementById('dob').value;
  var phoneNum = document.getElementById('ph-no').value;
  var emailID = document.getElementById('email').value;
  var password = document.getElementById('password').value;
  var rePassword = document.getElementById('re-password').value;

  if (firstName.length === 0) {
      alert('Enter the first name!');
      tReturn = false
  }else if (lastName.length === 0) {
      alert('Enter the last name!');
      tReturn = false
  }else if (yearBirth.length === 0) {
      alert('Enter date of birth!');
      tReturn = false
  }else if (phoneNum.length === 0) {
      alert('Enter the phone number!');
      tReturn = false
  }else if (phoneNum.length > 10) {
      alert('Check phone number!');
      tReturn = false
  }else if (emailID.length === 0) {
      alert('Enter the email ID !');
      tReturn = false
  }else if (password.length === 0 && (rePassword.length === 0 || rePassword.length !== 0)) {
      alert('Enter the password!');
      tReturn = false
  }else if (rePassword.length === 0) {
      alert('Re-enter the password!');
      tReturn = false
  };

  return tReturn
}

<!--REM: It is better practise to assign those events using javascript - I merely leave it here to point put the event/difference -->
<form class="input" action="redirect.html" onsubmit="return myValidator()">
    <input class="input-field" id="fname" placeholder="First Name" type="text">
    <input class="input-field" id="lname" placeholder="Last Name" type="text">
    <input class="input-field" id="dob" placeholder="Date of Birth" type="date">
    <input class="input-field" id="ph-no" placeholder="Phone Number" type="text">
    <input class="input-field" id="email" placeholder="Email ID" type="email">
    <input class="input-field" id="password" placeholder="Enter Password" type="password">
    <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password">
    <button class="btn" id="sub-btn" type="submit">SIGN UP</button>
</form>

Also note that empty inputs can nowadays be prevented by using the attribute required as well as other nice form-features and be styled accordingly using pseudo-css-classes.

<form class="input" action="redirect.html">
    <input class="input-field" id="fname" placeholder="First Name" type="text" required>
    <input class="input-field" id="lname" placeholder="Last Name" type="text" required>
    <input class="input-field" id="dob" placeholder="Date of Birth" type="date" required>
    <input class="input-field" id="ph-no" placeholder="Phone Number" type="text" required>
    <input class="input-field" id="email" placeholder="Email ID" type="email" required>
    <input class="input-field" id="password" placeholder="Enter Password" type="password" required>
    <input class="input-field" id="re-password" placeholder="Re-enter Password" type="password" required>
    <button class="btn" id="sub-btn" type="submit">SIGN UP</button>
</form>

How to solve javascript redirection problem?

4 Answers4