表單提交時的自舉模式控制

Question

我正在做我的項目，我在項目中需要一些幫助。 以下內容代表該代碼：

<a href="#loginmodal" data-toggle="modal" class="btn"><span class="glyphicon glyphicon-lock"></span> LogIn/Sign-Up</a>

上面的代碼將代表以下模態代碼：

<div class="modal fade" id="loginmodal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" name="f1" action="index.php" id="loginform" onsubmit="return validatelogin();" method="post" role="form">
            <div class="modal-header">
                <h4><button class="close" data-dismiss="modal">&times;</button>Login</h4>
            </div>
            <div class="modal-body">
                <div id="errorDiv1">
                </div>
                    <div class="form-group">
                        <label for="inputUsername3" class="col-sm-2 control-label">Username</label>
                        <div class="col-sm-5">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input type="text" class="form-control" name="txtuname" id="inputlUsername3" placeholder="Username">
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-5">
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                            <input type="password" name="txtpwd2" class="form-control" id="inputlPassword3" placeholder="Password">
                            </div>
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <a href="#registermodal" data-dismiss="modal" data-toggle="modal">Register Here</a>
                <input type="submit" name="submit" class="btn btn-primary" value="Login">
                <a class="btn btn-default" data-dismiss="modal">Cancel</a>
            </div>
            </form>
        </div>  
    </div>
</div>

這將重定向到函數，如下所示：

function validatelogin(){
    $unme2=document.getElementById("inputlUsername3").value;
    $lpwd2=document.getElementById("inputlPassword3").value;
    if($unme2=="" || $lpwd2=="")
    {
        $("#errorDiv1").addClass('alert alert-danger');
        $("#errorDiv1").html("Please fill all fields.");
        return false;   
    }
    else
    {
        //php code for authentication
    }
}

現在，我想提出以下建議：如何在用戶名錯誤或密碼錯誤的情況下以相同的方式出現錯誤，而無需重定向到任何其他頁面。

以下代表php代碼：

<?php
    $uname=$_POST['txtuname'];
    $pwd2=$_POST['txtpwd2'];
    $con=mysql_connect("localhost","root","") or die(mysql_error());
    mysql_select_db("onlineshop",$con);
    $r=mysql_query("select password from users where username='$uname'",$con);
    $row = mysql_fetch_row($r);
    $val=$row[0];

    if($val!="")
    {
        if($pwd2==$val)
        {
            session_start();
            $_SESSION['username']=$uname;
            header("location:index.php");
        }
        else 
        {
            $msg="Invalid UN/PW";   
        }
    }
?>

請盡快回復

Answer 1

以下列方式使用您的代碼以獲取有關ajax更多信息， 請單擊此處

 function validatelogin(){ $unme2=document.getElementById("inputlUsername3").value; $lpwd2=document.getElementById("inputlPassword3").value; if($unme2=="" || $lpwd2=="") { $("#errorDiv1").addClass('alert alert-danger'); $("#errorDiv1").html("Please fill all fields."); return false; } else { //php code for authentication sendDataToServer(); } } function sendDataToServer(){ var username= document.getElementById("inputlUsername3").value; var password= document.getElementById("inputlPassword3").value; $.ajax({ url:'index.php', type:'POST', data:{ username:username, password:password, }, success:function(data){ if(data['flag']=='correct'){ alert('username and password correct'); // move to home page or some other page }else{ // if you are here means username and password are incorrect // show an alert or can show a hide div } }, error:function(){ } }); } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <a href="#loginmodal" data-toggle="modal" class="btn"><span class="glyphicon glyphicon-lock"></span> LogIn/Sign-Up</a> <div class="modal fade" id="loginmodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4><button class="close" data-dismiss="modal">&times;</button>Login</h4> </div> <div class="modal-body"> <div id="errorDiv1"> </div> <div class="form-group"> <label for="inputUsername3" class="col-sm-2 control-label">Username</label> <div class="col-sm-5"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" name="txtuname" id="inputlUsername3" placeholder="Username"> </div> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-5"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" name="txtpwd2" class="form-control" id="inputlPassword3" placeholder="Password"> </div> </div> </div> </div> <div class="modal-footer"> <a href="#registermodal" data-dismiss="modal" data-toggle="modal">Register Here</a> <input type="button" name="submit" id="checkButton" class="btn btn-primary" value="Login"> <a class="btn btn-default" data-dismiss="modal">Cancel</a> </div> </div> </div> </div>