CODEWITHSUNDEEP
jqueryform-submitjquery-ui-widget-factory
Odys
Odys

Reputation: 9100

Exclude widget's input fields from being submitted in parent form

I've created a widget using the widget factory and have added elements like <input> that are required by it. This widget can be initialized inside a form element, resulting in submitting the added fields when the parent form is submitted.

I want to tell form not to submit the specified inputs, and this must be done inside the widget since this is the one knowing the added input elements.

The idea is to get the closest form from inside widget and disable the inputs (eg .prop("disabled", true)) just before submitting the form, and re-enable them afterwards.

It is important not to bother code outside the widget, I want to keep coupling low.

Unfortunatelly, during _create of the widget, the this.element isn't added to the DOM so there is no way to add a handler to the form's submit event.

Sample code:

$(function ()
{
    $.widget("Foo.Widget",{
        _create: function(){
            this.element.append($("<input type='radio'>").attr("name", "theInput"));

            // bind to the containing form's submit event
            var form = this.elemeng.closest("form"); // returns $()

        };

    });
});

It is possible to bind latter, but this would require the user to interact with the widget somehow, which isn't mandatory.

I could add a timer and bind it a little latter, since the user won't submit it during the first couple of second (evil solution).

Also, I could pass either the context of the widget or the parent form as options but this is something I want to avoid.

Upvotes: 2

Views: 87

Answers (0)

Related Questions