javascript - 表单提交时的 Bootstrap 模态控制

Question

我正在做我的项目，我的项目需要一些帮助。下面是 HTML 代码:

<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 的更多信息 click here

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>