表单提交那些事儿

登录页登录button

制作一个登录页时,我们需要对登陆用户输入的账号和密码与数据库匹配,验证其账号和密码的正确,这个时候会遇到一个问题,登录按钮类型是用submit还是button呢

<input type="submit" value="登录"/>
<input type="button" value="登录"/>

我建议type是button,因为如果是submit的话,在我们点击按钮时form表单是会自动提交数据到action所指定的页面的,但是一般情况下我们是需要判断用户输入的内容的准确性的,这样会使我们的弹出层失效。我们可以把类型改为button,通过为button绑定一个点击事件,通过它来判断用户是否有输入和输入的数据是否准确。

	<form id="goto" class="form-signin" action="../index.html" method="post">
		<h3 class="form-signin-heading">欢迎登录<br	/>新闻发布和管理系统后台</h3>
		<input id="number" type="text" class="form-control" placeholder="请输入账号" required="required" autofocus="autofocus"/>
		<input id="password" type="password" class="form-control" placeholder="请输入密码" required="required"/>
		<input type="button" value="登录"/>
	</form>

获取用户输入的账号和密码

var number = $("#number").val();
var password = $("#password").val();

实现效果如下

$("#btn").click(function(){
 	var number = $("#number").val();
 	var password = $("#password").val();
	$.post("../Model/Admin.php", {number: number, password: password}, function(res){
	if (res == 10) {
		//jg_error.style.display = "inline";
		showAndHide('jg_error','show');
	} else{
		$("#goto").submit();
	}
	});
}

通过php连接数据库,将数据与数据库内的信息相匹配

$number = $_POST['number'];
$password = $_POST['password'];
require_once '../database.php';
$pdo = new PDO(DSN, USER, PASS);
if (empty($pdo)) {
    die;
}
$sql = "select adminid from admin where number='{$number}' and password='{$password}'";
$result = $pdo->query($sql);
$stmt = $result->fetchAll(PDO::FETCH_ASSOC);
if (empty($stmt))
{
    echo "10";
}
else {
    echo $stmt[0]['adminid'];
}

注意一点就是,button类型是无法实现表单的提交的,我们可以通过以下方式来实现

$("#goto").submit();

或者通过出发隐藏域来实现

<input type="submit" id="" style="display: none;" value="" />
$("input[type=submit]").trigger("click");
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九月镇灵将

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值