用Jquery隐藏登录表单 [英] hiding login form with Jquery
问题描述
我创建登录从单击提交按钮时发送变量login_success.php page.but我想使当我点击提交按钮登录表单将关闭。我可以使用Jquery关闭表单
< script type =text / javascript>
$（document）.ready（function（）{
$（button）。click（function（）{
$（。loginform）。hide（）;
}）;
}）;
< / script>
但此时表单不会向.php文件发送请求。我使它像插件脚本.php文件，然后重定向到index.html site.It也不错，但我可以看到反射。我可以如何将它们结合？
这是我的表格
< div class =loginform>
< form action =php / login.phpmethod =postid =login>
< fieldset class =loginfield>
< div>
< label for =用户名>用户名< / label> < input type =textid =usernamename =username>
< / div>
< div>
< label for =password>密码< / label> < input type =passwordid =passwordname =password>
< / div>
< / fieldset>
< button type =submitid =submit-go>< / button>
< / form>
< / div>
编辑
我使用了NAVEED sad功能。 firefox中的FireBug和我可以看到，我的表单验证工作正常。它发送并请求login.php但我无法对我的表单做任何更改。它不关闭或$ arr值未显示在div标签上。
您应该使用 JSON / AJAX组合：
a>
如果您的表单看起来像这样：
< script type =text / javascriptsrc =jquery-1.4.2.js>< / script>
< script type =text / javascriptsrc =ajax.js>< / script>
< div id ='errors'>< / div>
< div class ='loginform'id ='loginform'>
< form action =php / login.phpmethod =postid =login>
用户名：< input type =textid =usernamename =username>
密码：< input type =passwordid =passwordname =password>
< button type =submitid =submit-govalue ='Login'>< / button>
< / form>
< / div>
您在 ajax.js 文件中的jQuery代码提交表单，然后从 JSON 中的'php / login.php '获取数据并填写所需的DIV。如果 login 是表单的ID。
jQuery（'＃login'）。live（'提交'，函数（事件）{
$ .ajax（{
url：'php / login.php'，
类型：'POST'，
dataType：'json' ，
data：$（'＃login'）。serialize（），
成功：函数（data）{
（数据中的var id）{
jQuery（' '+ id）.html（data [id]）;
}
}
}）;
return false;
}）;
您的 login.php p>
$ username = $ _POST ['username'];
$ password = $ _POST ['password'];
if（$ username and $ password in database）{
//它只会替换id ='loginform'DIV内容
//登录表单将会消失
$ arr = array（loginform=>您已登录）;
$ b $} else {
//它只会替换id ='errors'DIV内容
$ arr = array（errors=>你是未验证，请重试）;
}
echo json_encode（$ arr）;
< 更详细的说明： / php-problem-submitting-form-in-ajax-json>如何在ajax / json中提交表单： 所有表单的常规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.
You should use JSON/AJAX combination:
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:
这篇关于用Jquery隐藏登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
