0

こんにちは、Jqmodal を使用して、Web サイトで連絡先フォームのポップアップ ウィンドウを作成しています。お問い合わせフォームは正しく読み込まれて表示されますが、お問い合わせフォーム自体はajaxを使用して送信しようとしており、ユーザーに「メッセージ送信」というメッセージを表示してフォームを上にスライドさせたいと考えています。

とにかく、私が直面している主な問題は、フォームを送信するが、ユーザーが ajax 経由で接続する必要がある実際の php ファイルに移動することです。私のコードは次のとおりです。それはおそらくJqmodal側のものですが、誰かが私を素晴らしい方向に向けることができるかどうかはわかりません。また、閉じるボタンが機能していませんが、修正できると思います。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="http://www.modernizr.com/downloads/modernizr.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type='text/javascript'>
$(document).ready(function() {
    $("#submit").click(function() {
        var action = $("#contact_form").attr('action');
        var form_data = {
            code:$("#code").val(),
            name:$("#name").val(),
            email:$("#email").val(),
            message:$("#message").val(),
            is_ajax:1
        };
        $.ajax({
            type:"POST",
            url:action,
            data:form_data,
            success: function(response)
            {
                if(response == 'success')
                    $("#form").slideUp('slow', function() {
                        $("#message").html("<p class='success'>Your Message Has Been Sent.</p>");
                    });
                else
                    $("#message").html("<p class='error'>Code was typed incorecctly.</p>");
            }
        });
        return false;
    });

    // refresh captcha
    $('#refresh').click(function() {
        change_captcha();
    });

    function change_captcha(){
        document.getElementById('captcha').src="./static/classes/get_captcha.php?rnd="+Math.random();
    };
});
</script>
<link href="./static/css/style.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Quantico:400,700' rel='stylesheet' type='text/css'>

</head>
<body>
    <span id="close">
        <button class="jqmClose">Close</button>
    </span>
    <br/><br/>
    <form name="contact_form" method="POST" action="./static/classes/contact.php" enctype="application/x-www-form-urlencoded">
        <input id="name" name="name" type="text" placeholder="Full Name..." required>
        <br/>
        <input id="email" name="email" type="email" placeholder="Your Email..." required>
        <br/>
        <input id="message" name="message" type="text" placeholder="Your Message..." required>
        <br/>
        <section id="captcha_area">
            <img src="./static/classes/get_captcha.php" alt="" id="captcha" />
            <br/>
            <input name="code" type="text" id="code">
        </section>
        <section id="refresh">?</section>
        <br clear="all" /><br clear="all" />
        <input type="submit" id="submit" value="Send">
    </form>
    <span id="message"></span>
</body>
</html>
4

1 に答える 1

0

$("#submit").click(function() {=> に変更し$("#submit").click(function(e) { e.preventDefault();ます。コードの残りの部分は同じです。これにより、送信アクションのデフォルトの動作が停止します。

または、 .submitイベントを使用できます。

于 2012-02-26T15:09:53.367 に答える