表单提交时引导模式控制

Question

我正在做我的项目＆amp;我的项目需要一些帮助。以下代表该代码的HTML代码：

class ExampleService : Service, IService
{
}

以上代码将代表以下模式代码：

<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>

现在我想建议如果在用户名错误或密码错误而不重定向到任何其他页面时，如何在同一模式下出现错误。

以下代表php代码：

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
    }
}

请尽快回复

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>