Связывание двух страниц

Я работаю над попыткой связать страницы вместе, поэтому, если человек войдет в систему с помощью страницы входа, они будут перенаправлены на конкретную созданную страницу, и если пользователь нажмет кнопку регистрации, они будут перенаправлены на страницу регистрации и с там, после ввода информации, они будут перенаправлены на другую страницу. Кнопка входа или регистрации не работает. Есть ли способ исправить это?

Пока что у меня есть это для моей страницы входа.

function login() {
  var users = ["admin1", "admin2", "admin3", "admin4"];
  var pass = ["pass1", "pass2", "pass3", "pass4"];

  ivar aUser = document.getElementById("user_name").value;
  var aPass = document.getElementById("password").value;

  for (i = 0; i < users.length; i++) {
    if (users[i] == aUser && pass[i] == aPass) {
      window.location = "dashboard.php";
      break;
    }
  }

  var myOut = document.getElementById("output");
  myOut.innerHTML = "Who Are You? / Incorrect Password";
  myOut.className = "error";

  function init() {
    var login_button = document.getElementById("login_button");
    if (login_button !== null) {
      login_button.onclick = login;
    }

    var register_button = document.getElementById("register_button");
    if (register_button !== null) {
      register_button.onclick = validation;
    }

    for (i = 1; i <= 10; i++) {
      var myErr = document.getElementById("err" + i);
      if (myErr !== null) {
        myErr.className = "error";
      }
    }
  }
<h1>
  Please Login
</h1>
<form id = "order_form">
  <fieldset>
    <legend>Login</legend>
    <div class = "tab">
      <div class = "tRow">
        <div class = "tRow">
          <div class = "tCell">
            <label for = "user_name">User Name:</label>
          </div>
          <div class = "tCell">
            <input type = "text" id = "user_name" maxlength = "50" />
          </div>
        </div>
        <!-- END OF THIS SELECTION -->
        <div class = "tRow&gt; &lt;div class = ">
          <label for = "password">Password:</label>
        </div>
        <div class = "tCell">
          <input type = "text" id = "password" required = "" maxlength = "50" />
        </div>
      </div>
      <!-- END OF THIS SELECTION -->
      <div class = "tRow">
        <div class = "tCell">
          &nbsp;
        </div>
        <div class = "tCell">
          <input type = "button" id = "login_button" value = "Login" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
      <div class = "tRow">
        <div class = "tCell">
          &nbsp;
        </div>
        <div class = "tCell">
          <input type = "button" id = "register_button" value = "Register Now!" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
    </div>
    <!-- END OF THE TABLE  -->
    <br />
    <div id = "output" class = "error"></div>
  </fieldset>
</form>

Функция проверки:

function validation() {

    for (i=1; i<=10; i++) {
      var myErr = document.getElementById("err" + i); 
      myErr.innerHTML = "";
   }
    document.getElementById("output").innerHTML = "";


        var dept_name = document.getElementById("dept_name").value;
        var user_email = document.getElementById("user_email").value;
        var user_password = document.getElementById("user_password").value;
        var phone_number = document.getElementById("phone_number").value;
        var first_name = document.getElementById("first_name").value;
        var last_name = document.getElementById("last_name").value;
        var office_location = document.getElementById("office_location").value;



        var valid = true;

        if (dept_name == "") {
            document.getElementById("err1").innerHTML = "Invalid!";
            valid = false;
        }

        if ((user_email) = = "") {
        valid = false;
        document.getElementById("err2").innerHTML = "Invalid!"; 
        }

        if ((user_password) = = "") {
        valid = false;
        document.getElementById("err3").innerHTML = "Invalid!"; 
        }

        if ((first_name) = = "") {
        valid = false;
        document.getElementById("err4").innerHTML = "Invalid!"; 
        }

        if ((last_name) = = "") {
        valid = false;
        document.getElementById("err5").innerHTML = "Invalid!"; 
        }

        if (isNaN(phone_number) || card_number.length !==11) {
        valid = false;
        document.getElementById("err6").innerHTML = "Invalid!"; 
        }

        if ((office_location) = = "") {
        valid = false;
        document.getElementById("err7").innerHTML = "Invalid!"; 
        }
}
window.onload=init;

Почему вы храните пароли и имена пользователей в файле js? Надеюсь, это внутренний проект ...

Pedro Lobito 29.04.2018 09:44

Отправьте идентификатор пользователя и пароль в PHP, который принимает решение сохранить состояние входа в сеанс и отправить заголовок перенаправления.

mplungjan 29.04.2018 09:54

Это. По сути, это образец проекта

Sozo Teki 29.04.2018 09:54

Я создал вам отрывок. Он сразу показывает орфографическую ошибку и отсутствующую скобку. Исправьте, пожалуйста, этот ivar?

mplungjan 29.04.2018 10:00

Также var userPos = users.indexOf(aUser); if (userPos !=-1 && userPos === pass.indexOf(aPass)) window.location = "dashboard.php";

mplungjan 29.04.2018 10:03

Хорошо. Я не видел там i минуту. Так что я в значительной степени помещаю это в js. файл или где находится var?

Sozo Teki 29.04.2018 10:09

Это не самое главное. Отсутствие скобок и отсутствие вызова init убьют скрипт. Как и отсутствующая функция проверки

mplungjan 29.04.2018 10:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
7
41
1

Ответы 1

Несколько ошибок

  1. недостающие скобки
  2. нет выполнения init
  3. отсутствует функция проверки

Это работает:

function login() {
  var myOut = document.getElementById("output");

  var users = ["admin1", "admin2", "admin3", "admin4"];
  var pass = ["pass1", "pass2", "pass3", "pass4"];

  var aUser = document.getElementById("user_name").value;
  var aPass = document.getElementById("password").value;

  for (i = 0; i < users.length; i++) {
    if (users[i] == aUser && pass[i] == aPass) {
      myOut.innerHTML = "Correct - you will be redirected";
      setTimeout(function() {
        window.location = "dashboard.php";
      },1000);  
      return;
    }
  }
  myOut.innerHTML = "Who Are You? / Incorrect Password";
  myOut.className = "error";
}


function init() {
  var login_button = document.getElementById("login_button");
  if (login_button !== null) {
    login_button.onclick = login;
  }

  var register_button = document.getElementById("register_button");
  if (register_button !== null) {
    register_button.onclick = validation;
  }

  for (i = 1; i <= 10; i++) {
    var myErr = document.getElementById("err" + i);
    if (myErr !== null) {
      myErr.className = "error";
    }
  }
}
function validation() { /* you need some code here */ }
window.onload=init;
<h1>
  Please Login
</h1>
<form id = "order_form">
  <fieldset>
    <legend>Login</legend>
    <div class = "tab">
      <div class = "tRow">
        <div class = "tRow">
          <div class = "tCell">
            <label for = "user_name">User Name:</label>
          </div>
          <div class = "tCell">
            <input type = "text" id = "user_name" maxlength = "50" />
          </div>
        </div>
        <!-- END OF THIS SELECTION -->
        <div class = "tRow&gt; &lt;div class = ">
          <label for = "password">Password:</label>
        </div>
        <div class = "tCell">
          <input type = "text" id = "password" required = "" maxlength = "50" />
        </div>
      </div>
      <!-- END OF THIS SELECTION -->
      <div class = "tRow">
        <div class = "tCell">
          &nbsp;
        </div>
        <div class = "tCell">
          <input type = "button" id = "login_button" value = "Login" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
      <div class = "tRow">
        <div class = "tCell">
          &nbsp;
        </div>
        <div class = "tCell">
          <input type = "button" id = "register_button" value = "Register Now!" />
        </div>

      </div>
      <!--END OF THIS SELECTION-->
    </div>
    <!-- END OF THE TABLE  -->
    <br />
    <div id = "output" class = "error"></div>
  </fieldset>
</form>

Вы можете упростить тест:

var userPos = users.indexOf(aUser); 
if (userPos !=-1 && userPos === pass.indexOf(aPass)) {
  ...
}

Это действительно очень помогает. У меня есть дурная привычка пропускать скобки, и мне нужно над этим поработать. У меня есть функция проверки, но то, как я ее настроил, применяется только к registration.php.

Sozo Teki 29.04.2018 10:29

Это то, что у меня есть для функции проверки: добавлено в исходный пост.

Sozo Teki 29.04.2018 10:32

В любом случае. Я починил твои кнопки. Теперь можно продолжить. Не стесняйтесь удалить вопрос, поскольку он ОЧЕНЬ локализован для вашей ситуации

mplungjan 29.04.2018 10:47

Другие вопросы по теме