Как мне перенаправить мою страницу при нажатии "Отправить"?

ProgramBox

Как мне перенаправить мою страницу при нажатии «Отправить»?

Post author:admin
Запись опубликована:1 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я не вижу, что не так в моем коде здесь. Я хочу, чтобы она переходила на NHGSignin.php если введено ‘new horizon gurukul’. При нажатии кнопки «Далее» предполагается, что она перенаправит меня, но это не так. Я не понимаю, почему? Заранее благодарю вас!

Вот мой код:

 var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();

function displaySignInError() {
  switch (schoolName) {
    case 'new horizon gurukul':
      document.getElementById("schoolName").action = 'NHGLogin.php';
      break;
    default:
      console.log('ajlsdfba');
  }
}

 @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid Sans:400,700|Josefin Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');

#container {
  width: 30em;
  background-color: #eee;
  height: 30em;
  border-radius: 50%;
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

#wrapper {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
}


#schoolSubmitButton {
  margin-top: 35px;
  text-align: center;
  background-color: white;
  border: 2px solid #fef;
  height: 2em;
  width: 10em;
}

#schoolName {
  margin-bottom: 40px;
  position: fixed; 
  top: 60%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
  text-align: center;
}

#schoolNameBox {
  height: 2em;
  border: none;
  width: 26em;
  margin-left: 0;
  padding-left: 10px;
}

#schoolSubmitButton p {
  position: relative;
  top: 50%;
  position: relative; 
  top: 30%; 
  left: 50%; 
  transform: translate(-50%, -70%);
  transform: -webkit-translate(-50%, -70%);
  transform: -ms-translate(-50%, -70%);
}

/*
::-webkit-input-placeholder {
   padding-left: 10px;
}

:-moz-placeholder {
  padding-left: 10px;
}

:-ms-input-placeholder {
  padding-left: 10px;
}
*/

#signUpPageLink {
  text-decoration: none;
  position: relative;
  top: 5em;
}

#schoolNameDiv {
  position: fixed; 
  top: 60%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
  text-align: center;
}

#main-heading {
  text-align: center;
  text-decoration: none;
  font-size: 24px;
}

#schoolAvatar {
  height: 9em;
  width: 9em;
  border-radius: 50%;
  position: fixed; 
  top: 25%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

 <!DOCTYPE html>
<html>
  <head>
    <title>NHG</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="css/normalize.css"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/resposive.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  </head>
  <body>
    <header>
            <div id="main-head">
              <!--      REMEMBER TO STYLE THE HEADING AND SIGN UP LINK        -->
              <a href="#" id="main-heading"><h2>sKoolBook</h2></a>
            </div>
    </header>
    <section>
      <div id="container">
        <div id="wrapper">
          <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
          <div id="schoolNameDiv">
            <form method="POST" id="schoolName" action="#">
              <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter you School Name...">
              <br>
              <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
                <p>Next</p>
              </button> 
              <br>
            </form>
            <br>
            <a href="signUp.php" id="signUpPageLink">Don't have an account? Sign Up.</a>
          </div>
        </div>
      </div>
    </section>
    <footer>
    </footer>
    <p id="demo"></p>
    <script src="JS/script.js"></script>
  </body>
</html>

Ответ №1:

Судя по вашему ответу, я предполагаю, что вы пытаетесь изменить действие формы.

Когда вы делаете:

 var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();

Вне функции она получает schoolName только при рендеринге html, если вы хотите получить название школы, когда пользователь нажимает кнопку, вы должны сделать это:

 function displaySignInError() {
  var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
  switch (schoolName) {
    case 'new horizon gurukul':
      document.getElementById("schoolName").action = 'NHGLogin.php';
      break;
    default:
      console.log('ajlsdfba');
  }
}

Проверьте обновленный фрагмент ниже.

 function displaySignInError() {
  var schoolName = document.getElementById('schoolNameBox').value.toLowerCase();
  switch (schoolName) {
    case 'new horizon gurukul':
      document.getElementById("schoolName").action = 'NHGLogin.php';
      break;
    default:
      console.log('ajlsdfba');
  }
}

 @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid Sans:400,700|Josefin Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i');

#container {
  width: 30em;
  background-color: #eee;
  height: 30em;
  border-radius: 50%;
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

#wrapper {
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
}


#schoolSubmitButton {
  margin-top: 35px;
  text-align: center;
  background-color: white;
  border: 2px solid #fef;
  height: 2em;
  width: 10em;
}

#schoolName {
  margin-bottom: 40px;
  position: fixed; 
  top: 60%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
  text-align: center;
}

#schoolNameBox {
  height: 2em;
  border: none;
  width: 26em;
  margin-left: 0;
  padding-left: 10px;
}

#schoolSubmitButton p {
  position: relative;
  top: 50%;
  position: relative; 
  top: 30%; 
  left: 50%; 
  transform: translate(-50%, -70%);
  transform: -webkit-translate(-50%, -70%);
  transform: -ms-translate(-50%, -70%);
}

/*
::-webkit-input-placeholder {
   padding-left: 10px;
}

:-moz-placeholder {
  padding-left: 10px;
}

:-ms-input-placeholder {
  padding-left: 10px;
}
*/

#signUpPageLink {
  text-decoration: none;
  position: relative;
  top: 5em;
}

#schoolNameDiv {
  position: fixed; 
  top: 60%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
  text-align: center;
}

#main-heading {
  text-align: center;
  text-decoration: none;
  font-size: 24px;
}

#schoolAvatar {
  height: 9em;
  width: 9em;
  border-radius: 50%;
  position: fixed; 
  top: 25%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  transform: -webkit-translate(-50%, -50%);
  transform: -ms-translate(-50%, -50%);
}

 <!DOCTYPE html>
<html>
  <head>
    <title>NHG</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="css/normalize.css"/>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/resposive.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  </head>
  <body>
    <header>
            <div id="main-head">
              <!--      REMEMBER TO STYLE THE HEADING AND SIGN UP LINK        -->
              <a href="#" id="main-heading"><h2>sKoolBook</h2></a>
            </div>
    </header>
    <section>
      <div id="container">
        <div id="wrapper">
          <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
          <div id="schoolNameDiv">
            <form method="POST" id="schoolName" action="#">
              <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter you School Name...">
              <br>
              <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();">
                <p>Next</p>
              </button> 
              <br>
            </form>
            <br>
            <a href="signUp.php" id="signUpPageLink">Don't have an account? Sign Up.</a>
          </div>
        </div>
      </div>
    </section>
    <footer>
    </footer>
    <p id="demo"></p>
    <script src="JS/script.js"></script>
  </body>
</html>

1. Да, я пытаюсь изменить действие формы, но изменение общедоступной переменной на закрытую здесь ничего не меняет. Я тоже пробовал, но он не перенаправляет на ‘NHGLogin.php ‘,

2. На самом деле это не вопрос частного или публичного, в вашем исходном коде schollName переменная всегда принимает одно и то же значение, поэтому она никогда не достигает нужного вам оператора case. В этом обновленном фрагменте действие формы изменяется на NHGLogin.php но помните, что это форма, поэтому вы должны ожидать, что СООБЩЕНИЕ NHGLogin.php не будет простым перенаправлением. Формы обычно не используются для перенаправления, если вы хотите просто перенаправить пользователя, вы можете использовать location.href = 'NHGLogin.php' .

3. Спасибо @LucasLazaro, я просто заменил форму на div, и это сработало!

Ответ №2:

вместо

 document.getElementById("schoolName").action = 'NHGLogin.php';

используйте это:

 window.location = "NHGLogin.php";