2016-10-21 9 views
1

ここで私のコードに何が間違っているのか分かりません。私はそれがNHGSignin.phpに行くことを望む '新しい地平線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>

+0

あなたのライン 'のvar schoolNameページのロード時、ボタンがクリックされたとき...'だけで、入力フィールドの値を取得しますありません。あなたの機能の中に*入れてください。 – j08691

答えて

1

あなたの答えから、私はあなたがフォームのアクションを変更しようとしていると思います。あなたが

:関数の外

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

HTMLがレンダリングされるときに、ユーザは、あなたがこれを行う必要があるボタンをクリックしたときにschoolNameを取得したい場合にのみ、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

私はフォームのアクションを変更しようとしていますが、パブリック変数をプライベート変数に変更しても違いはありません。私も同様に試しましたが、それは 'NHGLogin.php'にリダイレクトされません。 –

+0

本当に私的な対立の問題ではなく、元のコードでは 'schollName'変数は常に同じ値をとるため、あなたが望む声明。この更新されたスニペットでは、フォームアクションはNHGLogin.phpを変更しますが、これはフォームなので、単純なリダイレクトではなく、 'NHGLogin.php'へのPOSTを期待してください。フォームは通常、リダイレクトには使用されません。ユーザーにリダイレクトしたい場合は、 'location.href = 'NHGLogin.php'を使用できます。 –

+0

@LucasLazaroありがとう、私はちょうどdivとフォームを交換し、それは働いた! –

0

代わりの

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


使用この:

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

試してみましたが動作しませんでした。 –

関連する問題