2016-10-19 13 views
-3

私は他の類似の記事を見てみましたが、明らかに、私はPHP、HTML、JavaScriptのスキルが古くなっていることに気付かずにどこか間違ったことをしました。私が最後にこれらのことに触れたのは昨年だったので、多くの私の欠陥検出技術は錆びています。言われて、私がやろうとしているコードの一部は、このJavaScriptがJavaScriptで動作しない

<?PHP //If?> 
JS //Script to check if input is empty and prevents submission 
HTML <!--Input Forms--> 
<?PHP //DB actions ?> 

のように構成されている限り私にできることとして、PHPの構文が正しい(使用PHP思わ

私の構文が間違っているかどうかを確認するフォーマッタ)。ここの問題は、javascriptの部分が実行されていないことです。それが実行されると、UI(ログインフォーム)の残りの部分は何も理由なく消えます(入力が与えられたとき)。

以下は私が使用しているコードです。

 <?php 
     if(empty($_POST["username"]) && empty($_POST["password"])){ 
     ?> 
     <script type="text/javacsript"> 
     function checkField() 
        { 
      if((login-form.username.value == "") || (login-form.password.value == "")) 
         { 
          alert("Please fill in both Username and Password fields"); 
          return false; 
         } 
         else 
          return true; 
        } 
     </script> 

       <div class="panel-body"> 
        <form role="form" id="login-form" action="login.php" method="post" onsubmit="return checkField();"> 
         <fieldset> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Username" id="username" type="text" autofocus> 
          </div> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Password" id="password" type="password" value=""> 
          </div> 
          <!-- Change this to a button or input when using this as a form --> 
          <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>--> 
      <div class="form-group"> 
       <button class="btn btn-lg btn-success btn-block" type="submit">Login</button> 
      </div> 
         </fieldset> 
        </form> 
       </div> 
     <?php 
     }else { 
      $message = "wrong answer"; 
      echo "1<script type='text/javascript'>alert('$message');</script>"; 
     } 
     ?> 

onsubmitのJavaScriptが主な問題です。想定される真の条件がトリガーされたとき(入力が空であるか、両方とも空のとき)には実行されません。下の二次スクリプトは、データベース部分を提供する前の私の最初のテストです。 getElementByIdを

ミスを解決した後
 <script type="text/javacsript"> 
     function checkField() 
        { 
      if((document.getElementById("username").value == "") || (document.getElementById("password").value == "")) 
         { 
          alert("Please fill in both Username and Password fields"); 
          return false; 
         } 
         else 
          return true; 
        } 
     </script> 

編集2

、両方のログインとパスワードフィールドがないときにトリガーされるPHPの部分を使用して

編集checkField 1

Altキーコード()空がまったく動かない。アクション属性に手がある可能性があります

<form role="form" id="login_form" action="" method="post" onsubmit="return checkField();"> 

上記のコードは、アクション属性が原因であるかどうかをテストすることです。それでも結果は同じです。ページは空のフィールドで再読み込みされます。

最新のコード

 <?php 
     if(empty($_POST["username"]) && empty($_POST["password"])){ 
     ?> 
     <script type="text/javascript"> 
     function checkField() 
        { 
      if((document.getElementById("username").value == "") || (document.getElementById("password").value == "")) 
         { 
          alert("Please fill in both Username and Password fields"); 
          return false; 
         } 
         else 
          return true; 
        } 
     </script> 

       <div class="panel-body"> 
        <form role="form" id="login_form" action="" method="post" onsubmit="return checkField();"> 
         <fieldset> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Username" id="username" type="text" autofocus> 
          </div> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Password" id="password" type="password" value=""> 
          </div> 
          <!-- Change this to a button or input when using this as a form --> 
          <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>--> 
      <div class="form-group"> 
       <button class="btn btn-lg btn-success btn-block" type="submit">Login</button> 
      </div> 
         </fieldset> 
        </form> 
       </div> 
     <?php 
     }else { 
      $conn = mysqli_connect("localhost","root","rootacc","test"); 
      if($conn) 
      { 
       echo "success"; 
       header("LOCATION:tables.html"); 
      } 
     } 
     ?> 

編集3

すべての問題は解決しました。申し訳ありません初心者の質問には、貢献したすべてのあなたに感謝します。ここでは修正されたコード

 <?php 
     if(empty($_POST["username"]) && empty($_POST["password"])){ 
     ?> 
     <script type="text/javascript"> 
     function checkField() 
        { 
      if((document.getElementById("username").value == "") || (document.getElementById("password").value == "")) 
         { 
          alert("Please fill in both Username and Password fields"); 
          return false; 
         } 
         else 
          return true; 
        } 
     </script> 

       <div class="panel-body"> 
        <form role="form" id="login_form" action="" method="post" onsubmit="return checkField();"> 
         <fieldset> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Username" id="username" name="username" type="text" autofocus> 
          </div> 
          <div class="form-group"> 
           <input class="form-control" placeholder="Password" id="password" name="password" type="password" value=""> 
          </div> 
          <!-- Change this to a button or input when using this as a form --> 
          <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>--> 
      <div class="form-group"> 
       <button class="btn btn-lg btn-success btn-block" type="submit">Login</button> 
      </div> 
         </fieldset> 
        </form> 
       </div> 
     <?php 
     }else { 
      $conn = mysqli_connect("localhost","root","rootacc","test"); 
      if($conn) 
      { 
       echo "success"; 
       header("LOCATION:tables.html"); 
      } 
     } 
     ?> 

問題1問題2は、私自身のタイプミスが原因である getElementByIdを
に自分のプログラミング(代わりに、変数参照の他のスタイルのダッシュを使用して)だらしだけでなく、知識の欠如によるものであるですそれは発見されなかった。
問題3はIDと名前の理解が不足しているためです(同じようです)

問題を解決するためのすべての推奨事項が実装されています。

+2

コンソールにエラーがありますか? –

+0

"javascriptの部分は実行されません。それは動くかどうか? –

+4

'login-form.username.value' - この文は、' login'から 'form.username.value'を取り込みます。これはあなたが望むものではありません。とにかく、ブラウザでidを持つ要素を参照するグローバル変数を自動的に作成することは本当に悪い習慣なので、代わりに 'document.getElementById'を使用して入力フィールドへの参照を取得します。 – CBroe

答えて

0

ポストパラメータが設定されていないため、ELSE条件にならない可能性があります。

<div class="form-group"> 
    <input class="form-control" placeholder="Username" id="username" name="username" type="text" autofocus> 
</div> 
<div class="form-group"> 
    <input class="form-control" placeholder="Password" id="password" name="password" type="password" value=""> 
</div> 

POSTパラメータを設定するには、「name」属性を使用します。

関連する問題