在弹出框中提交表格
[英]form submit in popup box
问题描述
I create a login form in popup box. 
我在弹出框中创建一个登录表单。 When the username field is left blank, an error message will appear to notify the user to fill in the empty username field. 当用户名字段留空时，将出现一条错误消息，通知用户填写空的用户名字段。 As a test, I click on the login button leaving the username field, and the message appears in the popup box as expected. 作为测试，我单击登录按钮保留用户名字段，然后该消息将按预期显示在弹出框中。 But the problem is the popup box is closed immediately. 但是问题是弹出框立即关闭。 So, my question is how do I keep the popup box open with the error message shown? 因此，我的问题是如何使弹出框保持打开并显示错误消息？
Here is my script: 这是我的脚本：
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="http://designshack.net/tutorialexamples/modal-login-jquery/style.css">
<script type="text/javascript" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://designshack.net/tutorialexamples/modal-login-jquery/js/jquery.leanModal.min.js"></script>
</head>
<body>
<div id="w">
<div id="content">
<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a</center>
</div>
</div>
<div id="loginmodal" style="display:none;">
<?php
if($_POST["loginbtn"]){
if(!$_POST["username"]){
echo "<center><font color=red>please fill your username</font></center>";
}elseif(!$_POST["password"]){
echo "<center><font color=red>please fill your password</font></center>";
}
}
?>
<h1>User Login</h1>
<form method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
<script type="text/javascript">
$(function(){
$('#loginform').submit(function(e){
return false;
});
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
});
</script>
</body>
</html>
5 个解决方案
解决方案1
1 2014-08-28 05:07:44
The closeButton option will always cause the modal to be closed when the corresponding button is clicked. 单击相应按钮时， closeButton选项将始终导致模式关闭。 And looking at the leanModal source, there doesn't seem to be any direct way to manipulate its event-handling callback. leanModal源，似乎没有任何直接的方法来操纵其事件处理回调。
So if all you want to do is to keep the form modal opened if the fields are not filled, and let your server-side codes perform the validation you can just do the following: 因此，如果您只想在未填写字段的情况下保持表单模式打开，并让服务器端代码执行验证，则可以执行以下操作：
$('#loginform').submit(function(e){
if(!$('#username').val()) {
$('#loginmodal').show();
}
else
console.log("Enter your username");
return false;
});
Live demo on jsfiddle . jsfiddle上的实时演示。 Notice that I added an id to the form tag, and fixed some of the malformed HTML tags in the fiddle. 请注意，我在表单标签中添加了一个id ，并修复了小提琴中一些格式错误的HTML标签。
解决方案2
0 2014-08-28 04:34:25
解决方案3
0 2014-08-28 04:37:14
Haven't had a chance to test but try stopping the propagation of the click function, doing that tells the browser to not complete the default action for this event. 没有机会进行测试，但是尝试停止click函数的传播，这样做会告诉浏览器未完成此事件的默认操作。
$('#loginbtn').click(function(e){
if(!$('#username').val()){
e.stopPropagation();
}
}); }）;
or as the other answer suggests try using jquery validation which will help in getting all this to work much more easily I like to use: http://jqueryvalidation.org/ 或其他答案建议尝试使用jquery验证，这将有助于使所有这些工作更容易实现，我喜欢使用： http : //jqueryvalidation.org/
解决方案4
0 2014-08-28 04:40:30
This appears to be very similar to this question: How to force a html5 form validation without submitting it via jQuery 这似乎与以下问题非常相似： 如何在不通过jQuery提交的情况下强制进行html5表单验证
That answer assumes that you would be adding the required attribute to the necessary form elements, and also that you use a polyfill such as html5shiv if old browser support is a requirement. 该答案假定您将required属性添加到必要的表单元素中，并且如果需要旧的浏览器支持，则使用诸如html5shiv之类的polyfill。
解决方案5
0 2014-08-28 05:05:02
You have some missing information in the sample html, the form ID is missing therefor jQuery will not attach to it. 您在示例html中缺少一些信息，因此缺少表单ID，因此jQuery不会附加到它。
I handle this situation by using AJAX for the form action with a json response. 我通过将AJAX用于带有json响应的表单操作来处理这种情况。
Here is an example from one of my recent apps... Notice the event.preventDefault() method to keep the form from submitting. 这是我最近的一个应用程序中的一个示例...请注意event.preventDefault（）方法，以防止表单提交。
$(function () {
jQuery('body').on('submit', '#frmlOGIN', function (event) {
event.preventDefault();
jQuery.post("?action=ajax_signup", jQuery("#frmlOGIN").serialize(), function (data) {
if (data.status == "OK") {
jQuery("#modal_content").html(data.content);
} else {
jQuery("#error_message").html(data.response);
}
});
});
$('#modaltrigger').leanModal({
top: 110,
overlay: 0.45,
closeButton: ".hidemodal"
});
});
Here is a jsfiddle example. 这是一个jsfiddle示例。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.