0

我四处寻找，但找不到与我需要的相似的东西。我是 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>

提交.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>';
}

提前非常感谢。

4

1 回答 1

0

我同意@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");
    });
});

像这样的东西应该可以解决问题:)希望这会有所帮助！

于 2013-07-27T16:42:56.417 回答