Solution to the problem that the form in the jQuery UI Dialog control cannot be submitted normally_jquery

Recently, when using the Dialog control of jQuery UI, I found that if a form is placed in this control, all forms cannot be submitted normally. The specific symptoms are as follows:
1. The submit button is invalid and there is no response after clicking.

2. Even if other means are used to submit the page, the server cannot obtain the form data in the Dialog.

After studying the page source code, we found that the HTML elements dynamically generated when the jQuery UI Dialog control was initialized were added to the end of the page and behind the form element, and the original Dialog template part (which contained the form element) was also Moved into dynamically generated HTML elements. In other words, the form that was originally in the form was moved outside the form after Dialog was initialized, which caused all the forms in the Dialog template to become invalid.

I don’t know if the design of jQuery UI’s Dialog is a feature or a bug. In order to achieve normal page submission in Dialog, based on the above analysis, I found a simple solution - move the HTML element dynamically generated by the Dialog control into the form element in the "open" event handler of the jQuery UI control. The code As follows:

Copy code The code is as follows:

$("#dlg").dialog( {
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});

The "aspnetForm" in the code is the form element ID of the current page automatically generated by the ASP.NET application. You can change it to the form ID of your own page when using it.