Question

当我点击提交按钮将变量发送到login_success.php页面时，我创建了登录。但是当我点击提交按钮登录表单时，我想要关闭。我可以使用Jquery

关闭表单

<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   $(".loginform").hide();
 });
});
</script>

但此时表单不会向.php文件发送请求。我把它添加到.php文件的addin脚本，然后重定向到index.html site.It也很好，但我可以看到反射。我怎么能把它们结合起来？

这是我的表格

<div class="loginform">
  <form action="php/login.php" method="post" id="login">

        <fieldset class="loginfield">
                    <div>
            <label for="username">User Name</label> <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">Password</label> <input type="password" id="password" name="password">
        </div>
    </fieldset>
      <button type="submit" id="submit-go" ></button>
    </form>
</div>

修改我使用功能作为NAVEED悲伤。我在firefox中安装了FireBug，我可以看到我的表单验证工作正常。它发送并请求login.php但我无法对我的表单进行任何更改。它没有关闭或$ arr值没有显示在div标签上。

Answer 1

您应该使用JSON / AJAX组合：

Downlod jQuery

如果您的表单如下所示：

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<div id='errors'></div>
<div class='loginform' id='loginform'>
  <form action="php/login.php" method="post" id="login">
     Username:<input type="text" id="username" name="username">
     Password:<input type="password" id="password" name="password">
     <button type="submit" id="submit-go" value='Login'></button>
  </form>
</div>

ajax.js 文件中的jQuery代码提交表单，然后通过 JSON 中的'php / login.php '获取数据并填写所需的DIV。如果登录是表单的ID。

jQuery('#login').live('submit',function(event) {
    $.ajax({
        url: 'php/login.php',
        type: 'POST',
        dataType: 'json',
        data: $('#login').serialize(),
        success: function( data ) {
            for(var id in data) {
                jQuery('#' + id).html(data[id]);
            }
        }
    });
    return false;
});

您的 login.php 文件，如表单操作属性中所述：

$username = $_POST['username'];
$password = $_POST['password'];

if( $username and $password found in database ) {

  // It will replace only id='loginform' DIV content 
  // and login form will disappear
  $arr = array ( "loginform" => "you are logged in" ); 

} else {

  // It will replace only id='errors' DIV content
  $arr = array ( "errors" => "You are not authenticated. Please try again" );

}
echo json_encode( $arr );

更多细节：

Answer 2

尝试submit method

 $("button").click(function(){
   $("form.loginform").submit().hide();
 });

PS你知道将onclick处理程序应用于页面上的所有<button>元素是个坏主意，对吗？

Answer 3

$(document).ready(function(){
    $("button").click(function(){
        $(".loginform").hide();
            return false;
    });
});

用Jquery隐藏登录表单

3 个答案: