Code inserting into database twice

Question

I have the form

<aui:form action="<%= editURL %>" method="POST" name="fm">
    <aui:fieldset>

        <aui:input name="name" />

        <aui:input name="url" />

        <aui:input name="address" />

    </aui:fieldset>

    <aui:button-row>
        <aui:button type="submit" />

        <aui:button name="cancel" value="Cancel"/>

    </aui:button-row>
</aui:form>

and this piece of javascript code which is inserting into database twice I don't know why.

<aui:script use="aui-base,aui-form-validator,aui-io-request">
    AUI().use('aui-base','aui-form-validator',function(A){
        var rules = {
            <portlet:namespace/>name: {
                required: true
            },

            <portlet:namespace/>url: {
                url: true
            },

            <portlet:namespace/>address: {
                required: true
            },
        };

        var fieldStrings = {
            <portlet:namespace/>name: {
                required: 'The Name field is required.'
            },

            <portlet:namespace/>address: {
                required: 'The Address field is required.'
            },
        };
        alert("validator");
        new A.FormValidator({
            boundingBox: '#<portlet:namespace/>fm',
            fieldStrings: fieldStrings,
            rules: rules,
            showAllMessages:true,
            on: {
                    validateField: function(event) {
                     },
                    validField: function(event) {
                   },
                    errorField: function(event) {
                    },
                    submitError: function(event) {
                        alert("submitError");
                        event.preventDefault(); //prevent form submit
                    },
                    submit: function(event) {
                        alert("Submit");

                        var A = AUI();
                        var url = '<%=editURL.toString()%>';

                        A.io.request(
                            url,
                            {
                                method: 'POST',
                                form: {id: '<portlet:namespace/>fm'},
                                on: {
                                    success: function() {
                                        alert("inside success");// not getting this alert.
                                        Liferay.Util.getOpener().refreshPortlet();
                                        Liferay.Util.getOpener().closePopup('popupId');                                     
                                    }
                                }
                            }
                        );
                   }
                }
        });
    });

</aui:script>

However if I add the following piece of code, which is redundant because it is already present inside the submit block of above code and is not triggered any way because I do not have any save button in the form, then the value is inserted only once.

<aui:script use="aui-base,aui-io-request">
    A.one('#<portlet:namespace/>save').on('click', function(event) {
        var A = AUI();
        var url = '<%=editURL.toString()%>';

        A.io.request(
            url,
            {
                method: 'POST',
                form: {id: '<portlet:namespace/>fm'},
                on: {
                    success: function() {
                        Liferay.Util.getOpener().refreshPortlet();
                        Liferay.Util.getOpener().closePopup('popupId');
                    }
                }
            }
        );

    });
</aui:script>

This code generates Uncaught TypeError: Cannot read property 'on' of null which I think is because there is no save button in the form. But adding this code, the value is inserted into database just once which is what I want but the logic is flawed. How can I get the results I want by just by using the first piece of code?

Answer 1

The insertion was happening twice. Once from the default form submit and other from the A.io.request. Adding this piece of code

<aui:script use="aui-base,aui-io-request">
    A.one('#<portlet:namespace/>save').on('click', function(event) {
        var A = AUI();
        var url = '<%=editURL.toString()%>';

        A.io.request(
            url,
            {
                method: 'POST',
                form: {id: '<portlet:namespace/>fm'},
                on: {
                    success: function() {
                        Liferay.Util.getOpener().refreshPortlet();
                        Liferay.Util.getOpener().closePopup('popupId');
                    }
                }
            }
        );

    });
</aui:script>

resulted in the insertion only once. This code has obviously no relevance because there is no save button in the form. Hence there was Uncaught TypeError: Cannot read property 'on' of null which masked the flaw and prevented the form from being submitted twice.

Removing the above piece of code and preventing the default submit (by adding onSubmit="event.preventDefault(); in the form tag) resolves the issue.