CODEWITHSUNDEEP
javascripthttp-redirect
DigiLeon
DigiLeon

Reputation: 148

How to solve javascript redirection problem?

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>

Upvotes: 0

Views: 78

Answers (4)

Lain
Lain

Reputation: 3726

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>

Upvotes: 0

Omar Sy
Omar Sy

Reputation: 496

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';
}  });

Upvotes: 0

Santa
Santa

Reputation: 377

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>

Upvotes: 1

Omar Sy
Omar Sy

Reputation: 496

you need to add event preventdefault I think

Upvotes: 0

Related Questions