dongshang3309
2010-09-03 23:33
浏览 61

用Jquery隐藏登录表单

I created login from that when clicking submit button sends variables to login_success.php page.but I want to make that when I click submit button login form will be close. I can close form using Jquery

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

But this time form does not sends request to .php file. I made it like addin script to .php file and then redirected to index.html site.It also good but I can see reflection.How can I combine them?

this is my form

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

Edit I used function as NAVEED sad .I installed FireBug in firefox and I can see that my form validation works normal.It sends and request to login.php But I cant make any change on my form.It does not close or $arr values not shown on div tags.

图片转代码服务由CSDN问答提供 功能建议

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

 &lt; script type =“text / javascript”&gt; 
 $(document).ready(function(){
 $(“ 按钮“)。click(function(){
 $(”。loginform“)。hide(); 
}); 
}); 
&lt; / script&gt; 
    
 
 

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

这是我的表格< / p>

 &lt; div class =“loginform”&gt; 
&lt; form action =“php / login.php”method =“post”id =“login”&gt; \  n 
&lt; fieldset class =“loginfield”&gt; 
&lt; div&gt; 
&lt; label for =“username”&gt;用户名&lt; / label&gt;  &lt; input type =“text”id =“username”name =“username”&gt; 
&lt; / div&gt; 
&lt; div&gt; 
&lt; label for =“password”&gt;密码&lt; / label&gt;  &lt; input type =“password”id =“password”name =“password”&gt; 
&lt; / div&gt; 
&lt; / fieldset&gt; 
&lt; button type =“submit”id =“submit-go  “&gt;&lt; / button&gt; 
&lt; / form&gt; 
&lt; / div&gt; 
   
 
 

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douxin1163 2010-09-04 01:31
    已采纳

    You should use JSON/AJAX combination:

    Downlod jQuery

    If your form look like this:

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

    Your jQuery Code in ajax.js file to submit the form and then get data from 'php/login.php' in JSON and fill the required DIVs. If login is id of the form.

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

    your login.php file as described in form action attribute:

    $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 );
    



    More Detail:

    点赞 打赏 评论
  • dongzhanlian6289 2010-09-03 23:36

    Try submit method

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

    PS You do know that applying onclick handler to all <button> elements on the page is bad idea, right?

    点赞 打赏 评论
  • douyue2313 2010-09-03 23:54
    $(document).ready(function(){
        $("button").click(function(){
            $(".loginform").hide();
                return false;
        });
    });
    
    点赞 打赏 评论

相关推荐 更多相似问题