Fancybox form submit with ajax

Question

I have fancybox, where I want to submit a form. Also I want to handle that form by PHP code which is inside the same page. Below is my code.

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

Now my problem is When I submitting the form, the page is reloading, although I have used ajax form submit. Can anyone help me in this regard?

Answer 1

button type="submit"

this will reload ur page bcz ur submitting value to the declared page.

so you have to change ur code like below

input type="button" onclick="submitForm()"

this wont reload ur page.