提交按钮在Jquery Dialog中不起作用

时间:2016-03-19 14:37:17

标签: javascript php jquery dialog

我使用对话框弹出窗口而不是模态弹出窗口。现在的问题是“提交”按钮在对话框弹出窗口中不起作用,但它在模态弹出窗口中有效。如何在对话框弹出窗口中使提交按钮工作?

HTML

<form id="contact" name="contact" method="post" novalidate="novalidate">
    <div id="error"><span class="text-center"><p>Error</p></span></div>
        <div class="form-group"><input name="name" type="text" class="form-controls ease-out" id="name" placeholder="Name"></div>
        <div class="form-group"><input name="email" type="text" class="form-controls ease-out" id="email" placeholder="Email"></div>
        <div class="form-group"><textarea name="message" id="message" class="form-controls ease-out" required="" placeholder="Message"></textarea></div>
        <button id="submit" type="submit" class="newsletter-btn ease-out" title="Send" name="submit" value="Send">Send</button>
    </div>
</form>

DIALOG SCRIPT

这是打开对话框的脚本

<script>
    (function() {
        var dlgtrigger = document.querySelector( '[data-dialog-contact]' ),
            contact = document.getElementById( dlgtrigger.getAttribute( 'data-dialog-contact' ) ),
            dlg = new DialogFx( contact );
            dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
                })();
</script>

联系脚本

<script type="text/javascript">
            jQuery.validator.addMethod('answercheck', function (value, element) {
                    return this.optional(element) || /^\bcat\b$/.test(value);
                }, "type the correct answer -_-");

            // validate contact form
            $(function() {
                $('#contact').validate({
                    rules: {
                        name: {
                            required: true,
                            minlength: 2
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        message: {
                            required: true
                        },
                        answer: {
                            required: false,
                            answercheck: false
                        }
                    },
                    messages: {
                        name: {
                            required: "Name required",
                            minlength: "At least 4 letters"
                        },
                        email: {
                            required: "Email required"
                        },
                        message: {
                            required: "Message required",
                            minlength: ""
                        },
                        answer: {
                            required: ""
                        }
                    },
                    submitHandler: function(form) {
                        $(form).ajaxSubmit({
                            type:"POST",
                            data: $(form).serialize(),
                            url:"process.php",
                            success: function() {
                                $('#contact :input').attr('disabled', 'disabled');
                                $('#contact').fadeTo( "fast", 0.3, function() {
                                    $(this).find(':input').attr('disabled', 'disabled');
                                    $(this).find('label').css('cursor','default');
                                    $('#success').fadeIn();
                                });
                            },
                            error: function() {
                                $('#contact').fadeTo( "fast", 1, function() {
                                    $('#error').fadeIn();
                                });
                            }
                        });
                    }
                });
            });
        </script>

先谢谢你

0 个答案:

没有答案