Dojo double submittion

Yeah! I don't understand it myself!

The following is form that is dynamically loaded into a ContentPane called 'ContentCompanyType'. When the submit button is clicked to submit the form using ajax firefox's firebug shows the form being submitted twice. Once successfully and a second time the form doesn't validate.

I set the first retuned page (the success page) to just simple text so I know the double submit is coming from this page/code.

<script language="JavaScript">

    var human = 0;

    dojo.parser.parse(dojo.byId('CompanyTypeForm'));

    dojo.addOnLoad(function(){

        // Select the Company Type if displayed

        dijit.byId('CompanyTypeSelection').set('value',String(1));

        // AJAX get Company Type

        var dijitCT = dijit.byId("CompanyTypeSelection");

        dojo.connect(dijitCT, "onClick", function() {
            human = 1;
        });

        dojo.connect(dijitCT, "onChange", function() {
            if(human) {
                var ctNum = dijitCT.get('value');
                dijit.byId('ContentCompanyType').set("href","companyType/"+ctNum+"/");
            }
        });

        // AJAX Form submission

        var formName = dojo.byId("companyTypeForm");

        dojo.connect(formName, "onsubmit", function(event) {

            event.preventDefault();

            var xhrArgs = {
                form: dojo.byId("CompanyTypeForm"),
                //handleAs: "text",
                load: function(data) {
                    console.log('submitted');
                    dojo.byId("ContentCompanyType").innerHTML = data;
                },
                error: function(error) {
                    dojo.byId("errorMessage").innerHTML = error;
                }
            }
            //Call the asynchronous xhrPost
            dojo.byId("ContentCompanyType2").innerHTML = "Form being sent..."
            var deferred = dojo.xhrPost(xhrArgs);

        });

    });
</script>

<!-- List of all Form Elements -->

<form action="/settings/companyType/1/" method="POST" id="CompanyTypeForm" style="padding: 5px">
    <!-- Select list of all Company Types -->
        <select dojoType="dijit.form.FilteringSelect" id="CompanyTypeSelection">
                <option></option>
                <option value="2">Regulators</option>
                <option value="1">Lender2</option>
        </select>
    <label for="id_name">Name</label>&开发者_开发百科nbsp;&nbsp;&nbsp;<input name="name" required="true" value="Lender2" maxLength="60" promptMessage="" type="text" id="id_name" dojoType="dijit.form.ValidationTextBox" />
    <button dojoType="dijit.form.Button" type="submit" name="submitButton" value="Submit">Update</button>
</form>

You have an HTML form with a submit button. That will trigger an HTML submit sans Dojo. You are also connecting code to the onSubmit event which runs your logic with xhr. dojo.connect doesn't replace code, it just triggers another method when that method is called. So, both things happen. Working as designed.

You may want to define an onSubmit method here that's a no-op or just calls your method.