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>

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>';
}

よろしくお願いします。

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 に答える