新しいページではなく同じページにエラーを表示するには

Question

こんにちは、単純なログインフォームを作成しましたが、私のエラーはポップアップして別のページにポップアップしてしまい、同じページではなく私はちょうど私がcssで編集して赤くするなどの単純な<p>タグとして送信ボタンの下にポップアップしたいと思います。しかし、この時点ではすべて新しいページが開き、エラーが表示されます。

PHP：

?php 
include 'init.php'; 
function sanitize($data){ 
    return mysql_real_escape_string($data); 
} 
//check if user exists 
function user_exists($email){ 
     $email = sanitize($email); 
     return (mysql_result(mysql_query("SELECT COUNT(ID) FROM register WHERE email = '$email'"),0) == 1)? true : false; 
} 
//check if user has activated account 
function user_activate($email){ 
     $email = sanitize($email); 
     return (mysql_result(mysql_query("SELECT COUNT(ID) FROM register WHERE email = '$email' AND active =1"),0) == 1)? true : false; 
} 
function user_id_from_email($email){ 
    $email = sanitize($email); 
    return (mysql_result(mysql_query("SELECT id FROM register WHERE email = '$email'"),0,'id')); 
} 
function login($email,$password){ 
    $user_id = user_id_from_email($email); 
    $email = sanitize($email); 
    $password = md5($password); 

    return (mysql_result(mysql_query("SELECT COUNT(id) FROM register WHERE email = '$email' AND password ='$password'"),0) == 1)? $user_id : false; 
} 
if(empty($_POST)=== false){ 
    $email = $_POST['email']; 
    $password = $_POST['password']; 
} 
if(empty($email)|| empty($password) === true){ 
    $errors[] = "You must enter a username and a password"; 
} 
else if(user_exists($email) === false){ 
    $errors[] = "Email address is not registered"; 
} 
else if(user_activate($email) === false){ 
    $errors[] = "You haven't activated your account yet"; 
} 
else{ 
    $login = login($email, $password); 
    if($login === false){ 
     $errors[] = "email/password are incorrect"; 
    } else { 
     $_SESSION['user_id'] = $login; 
     header('Location: home.php'); 
     exit(); 
    } 
} 
print_r($errors); 
    ?> 

私のような単純なことを試してみました。 echo"<script>alert('Username or password is incorrect!')</script>";しかし、これはポップアップをもたらし、私が望むのは実際のpタグで、ボックスではなくページに表示されます。

Answer 1

を使用できた場合：

echo"<script>alert('Username or password is incorrect!')</script>"; 

を次にあなたがこのように関数を定義することができます -

function appendHtml(el, str) { 
    var div = document.createElement('div'); 
    div.innerHTML = str; 
    while (div.children.length > 0) { 
    el.appendChild(div.children[0]); 
    } 
} 

どこでも<script>...</script>インチその後

、あなただけを使用する必要があります：あなたのPHPスクリプトであり

echo"<script>appendHtml(document.body, '<p style=\"backround-color: #F00;\">Username or password is incorrect!</p>');</script>"; 

！

同様に簡単です！

Answer 2

フォームはAJAXリクエストで送信できます。エラーがある場合は、ページをリロードせずにエラーを表示します。例：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     $('#submit-button').on('click', function(e) { 
      var form = $('#login-form'); 
      $.post(form.prop('action'), form.serialize(), function(response) { 
       if (response.error) { 
        // show the error wherever you want 
       } 
      }); 
      return false; 
     }); 
    }); 
</script>