EDIT:

Some people have suggested calling submit directly on the form. This is not what I am trying to achieve. I want, specifically, to be able to call the click() event on an input type='submit' and have it submit the form like it normally would. jQuery UI Dialog appears to be interfering with this normal behavior. Please check out the jsFiddle link I have created, as the problem is re-creatable on there.


( First off I have already seen this question on StackOverflow, but the answer does not work in my situation: jQuery UI Dialog with ASP.NET button postback )

Desired Behavior:

On my page I have both a hidden field and a submit button (which is hidden via CSS).

What I want to do is use JavaScript to programmatically click this button, thereby causing the form to be submitted. Most importantly.... I want to trigger all of this from inside of a jQuery UI Dialog. Basically, the user will be making a selection inside the jQuery UI dialog that will cause the whole page to be submitted and reload.

Problem Statement

Triggering a button click like this normally works fine to submit the form. However, it fails when the action is triggered from within a jQuery UI Dialog.

As you can see in my jsFiddle code, I call jQuery's click() function on the submit button.... but the form does not actually submit! The button is indeed getting clicked by the JavaScript, but the "form submit behavior" does not occur itself. The page is not posted.

I believe the jQuery UI Dialog is somehow interfering with the form submit behavior of the button I am trying to programmatically click.

The reason I want to programmatically trigger the button click:

I cannot have the buttons located inside the dialog be sub

Edit
Report