javascript - Jquery dialog submit not working - Stack Overflow

admin管理员组

文章数量:1414908

yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)

This is the JSFIDDLE

And now this is my javascript that is not working for me :

<script>

$(document).ready(function() {
        $(function() {
            var currentForm;
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: false,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        currentForm.submit();
                    }
                }
            });
        });

    $("#signinform").submit(function() {
        currentForm = this;
        $('#dialog-confirm').dialog('open');
        return false;
    });
});

</script>

The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.

Thanks

yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)

This is the JSFIDDLE

And now this is my javascript that is not working for me :

<script>

$(document).ready(function() {
        $(function() {
            var currentForm;
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: false,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        currentForm.submit();
                    }
                }
            });
        });

    $("#signinform").submit(function() {
        currentForm = this;
        $('#dialog-confirm').dialog('open');
        return false;
    });
});

</script>

The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.

Thanks

• javascript
• jquery
• html
• forms
• dialog

Share Improve this question Follow edited May 13, 2013 at 15:21 Rixhers Ajazi asked May 13, 2013 at 11:33 Rixhers AjaziRixhers Ajazi 1,3131111 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It's because your re-using the $(document).on('submit', "#signinform", function(e) method which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.

You need to set a temporary variable to see wether you e from your code or the submit button.

Here is a JSFiddle with a working test, but you should do something nicer =)

EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.

So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.

A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".

Try this way (jsFiddle):

$(document).ready(function() {
    window.enterQueue=false;
    $("#signinform input:submit").on('click',function() {
        return getDialog(window.enterQueue);            
    });

    function getDialog(enterQueue){
        if(!enterQueue){
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: true,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        window.enterQueue=true;
                        $(this).dialog("close");
                        $("#signinform input:submit").trigger('click');
                    }
                }
            });
            return false;
        } else 
            return true;
    }

});

I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1

This is my solution :

<script type="text/javascript">

    $(document).ready(function() 
    {
        var Form = $("#signinform");
        $(function() 
        {
            $("#dialog-confirm").dialog(
            {
                resizable: false,
                autoOpen: false,
                dialogClass: "no-close",
                draggable: false,
                height: 320,
                width: 500,
                modal: true,
                buttons: 
                {
                    'Cancel': function() 
                    {
                        $(this).dialog("close");
                        Form.data("confirmProgress", false);
                    },
                    'Submit Information': function() 
                    {
                        Form.submit();
                        Form.data("confirmProgress", false);
                    }
                }
            });
        });
        Form.submit(function() 
        {
            if (!$(this).data("confirmProgress")) 
            {
                $(this).data("confirmProgress", true);
                $('#dialog-confirm').dialog('open');
                return false;
            } else {
                return true;
            }

        });
    });
    // Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
 $(document).on('click', "#Cancel", function(e)
    {
        e.preventDefault();
        var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
        $("#dialog-noconfirm").dialog(
        {
            resizable: false,
            dialogClass: "no-close",
            draggable: false,
            height: 320,
            width: 500,
            modal: true,
            buttons: 
            {
                "Cancel": function() 
                {
                    $(this).dialog("close");
                },
                "Go Back": function() 
                {
                    window.location.href = href;
                },
            }
        });
    });

</script>

本文标签： javascriptJquery dialog submit not workingStack Overflow