2016-10-21 4 views
1

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

Вот мой код:

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>

+0

Ваша линия 'вар schoolName ...' только получает значение поля ввода при загрузке страницы, а не при нажатии на кнопку. Поместите это * внутри * свою функцию. – j08691

ответ

1

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

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

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

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

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>

+0

Yup, я пытаюсь изменить действие формы, но изменение переменной public в частную не имеет никакого значения здесь. Я тоже пробовал, но он не перенаправляется на «NHGLogin.php», –

+0

На самом деле это не вопрос частного vs public, в вашем исходном коде переменная 'schollName' всегда принимает одно и то же значение, поэтому она никогда не достигает случая вы хотите. В этом обновленном фрагменте действие формы делает chanegt o NHGLogin.php, но помните, что это форма, поэтому вы должны ожидать, что POST для 'NHGLogin.php' не является простой переадресацией. Формы обычно не используются для перенаправления, если вы хотите просто перенаправить пользователя, вы можете использовать 'location.href = 'NHGLogin.php''. –

+0

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

0

вместо

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


использовать это:

window.location = "NHGLogin.php"; 
+0

Пробовал, но не работал. –

Смежные вопросы