我到处找,但找不到任何类似的东西。我是jQuery的新手,但在php方面有一些经验,我希望对模式对话框中的表单进行仅php的验证,如下所示。然后,结果需要显示在id为"dialog message"的模式消息中。有人能帮忙吗?我确信我遗漏了什么。
jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css" />
<script>
$(document).ready(function() {
$("#load-my-modal").button().click(function() {
$("#dialog-form").dialog("open");
});
$("#dialog-form").dialog({
autoOpen: false,
resizable: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": function() {
$("#test-form").submit();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#dialog-message").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
</script>
形式:
<div id="wrapper">
<button id="load-my-modal">Open Modal Form</button>
<div id="dialog-form" title="Modal form">
<p>All form fields are required!</p>
<form id="test-form" name="test-form" action="submit.php" method="post">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
submit.php:
$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
if(!empty($name) || !empty($email) || !empty($password)) {
echo '
<div id="dialog-message" title="All ok">All ok</div>';
} else {
echo '<div id="dialog-message" title="Fields are empty">Fields are empty</div>';
}
提前非常感谢。
我同意@emiloprea的评论。
$("#test-form").on("submit", function(event){
event.preventDefault();
var fields = $(this).serialize();
$.post("submit.php", fields, function(data){
$("#dialog-message").html(data);
$("#dialog-message").dialog("open");
});
});
像这样的东西应该能起到作用:)希望这能有所帮助!