0

私がやろうとしているのは、ユーザーがチェックボックスをクリックすると、フォームを含むモーダルウィンドウが開き、そのフォームがデータベースに情報を送信し、モーダルウィンドウにありがとうを表示することです。

次のモーダルウィンドウを使用しています：http： //designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/

  1. リンクをクリックするのではなく、チェックボックスをオンにしてモーダルウィンドウを開始するにはどうすればよいですか？

アドバイスをいただければ幸いです。

ありがとうございました！

アップデート：

<input type="checkbox" id="check_open" />Open</div>

<!-- hidden inline form -->
<div id="inline">
<h2>Send us a Message</h2>
<form id="contact" action="#" method="post" name="contact"><label for="email">Your E-mail</label>
    <input id="email" class="txt" type="email" name="email" />

    <label for="msg">Enter a Message</label>
    <textarea id="msg" class="txtarea" name="msg"></textarea>

    <button id="send">Send E-mail</button></form></div>

<!-- basic fancybox setup -->
<script type="text/javascript">
    function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }

    $(document).ready(function() {
        $("#check_open").fancybox();
        $("#contact").submit(function() { return false; });


        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var msgval    = $("#msg").val();
            var msglen    = msgval.length;
            var mailvalid = validateEmail(emailval);

            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }

            if(msglen < 4) {
                $("#msg").addClass("error");
            }
            else if(msglen >= 4){
                $("#msg").removeClass("error");
            }

            if(mailvalid == true && msglen >= 4) {
                // if both validate we attempt to send the e-mail
                // first we hide the submit btn so the user doesnt click twice
                $("#send").replaceWith("<em>sending...</em>");

                $.ajax({
                    type: 'POST',
                    url: 'sendmessage.php',
                    data: $("#contact").serialize(),
                    success: function(data) {
                        if(data == "true") {
                            $("#contact").fadeOut("fast", function(){
                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                setTimeout("$.fancybox.close()", 1000);
                            });
                        }
                    }
                });
            }
        });
    });
</script>
4

1 に答える 1

0

この例では.fancybox()、 modalbox クラスが割り当てられたものにメソッドを接続します。

$(".modalbox").fancybox();

チェックボックスをクリックしたときにモーダルダイアログを起動する場合は、モーダルボックスクラスを割り当てるか、ID で割り当てます。

<input type="checkbox" id="check_open" />Open

と

$("#check_open").fancybox();

あなたのdocument.ready機能で。

PHPスクリプトに送信されたデータをデータベースに保存する例はたくさんあります。たぶんここから始めます...

于 2012-12-13T03:32:20.610 に答える