Question

我有fancybox，我想提交表格。此外，我想通过PHP代码处理该表单，该代码位于同一页面内。以下是我的代码。

function lunchModal(itemID){
        jQuery('.share').on('click', function(){
            $data = '<div class="shareModal" ><div class="modal-header"><h3>Share Form Submission</h3></div> \
                        <form action="" class="shareForm" method="post">\
                            <div class="modal-body">\
                                <div class="control-group">\
                                    <label for="inputEmail" class="control-label">Enter Share Email</label>\
                                    <div class="controls">\
                                        <input type="email" id="inputEmail" placeholder="Share Email" name="email">\
                                        <input type="hidden" value="'+itemID+'" id ="documentID">\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="modal-footer">\
                                <div class="controls">\
                                    <button type="submit" class="btn btn-primary" id="submit">\
                                        <i class="icon icon-envelope"></i>Share</button>\
                                </div>\
                            </div>\
                        </form>\
                    </div>';
            jQuery.fancybox({
                height : '55%',
                autoDimensions: false,
                width: '70%',
                scrolling: 'auto',
                padding: '20px',
                title: false,
                content: $data,
                transitionIn: 'elastic',
                transitionOut: 'elastic',
                easingIn  : 'easeOutBack',
                easingOut  : 'easeInBack',
                centerOnScroll: 'true',
                onComplete: submitForm()
            });
            item_id = false;
        });
    };
    function submitForm() {
        jQuery('#submit').on('submit', function(e) {
            e.preventDefault();
            //var dataString = {
            //    'action' : 'shareDocument'
            //};
            var email = jQuery('#inputEmail').val();
            var id = jQuery('#documentID').val()
            var dataString = 'email='+email+'&documentID='+id;
            //jQuery.extend(true, dataString, form_data);
            console.log(dataString);

            jQuery.fancybox.showActivity();

            jQuery.ajax({
                url: window.location.pathname,
                type: 'POST',
                data: dataString,
                beforeSend: function() {
                    console.log(dataString);
                },
                success: function(data) {
                    alert('Document shared successfully');
                }
            });
            return true;
        });
    }

现在我的问题是当我提交表单时，页面正在重新加载，尽管我使用了ajax表单提交。在这方面有谁能帮助我？

Answer 1

按钮类型=“提交”

这将重新加载你的页面bcz你提交值到声明的页面。

因此您必须更改下面的代码

input type =“button”onclick =“submitForm（）”

这不会重新加载你的页面。

Fancybox表单提交ajax

1 个答案: