views:

134

answers:

0

I have a form with input fields and submit button. Each input's blur event is observed (using prototype) and a new Ajax.Request is fired for server side asynchronous validation. The Ajax response text modifies the DOM tree by updating the error texts and error div styles. Everything works fine, except when I left some input element, click the submit button and the DOM is modified in the meanwhile because of the AJAX response.

In short, the submit button's onclick event and the form's event onsubmit are not fired if the DOM is modified through the AJAX call in the meantime.

This is the code:

document.observe("dom:loaded", function() { 
    $$('#customerForm input[type=text],#customerForm select').each(function(node){
        node.observe("blur",function(){
            var formData=$('customerForm').serialize(true);
            var fieldName=this.name;
            var fieldId=this.id;
            var errDivId=this.id+'_err';
            var errDiv=$(errDivId);
            var parent=$(errDiv.parentNode);
            formData['fieldName']=fieldName;
            new Ajax.Request(
                validateUrl, 
                {
                    method: 'post', 
                    parameters: formData,
                    onComplete:function(response){
                        var responseText=response.responseText;
                        responseText=responseText.strip();
                        errDiv.innerHTML=responseText;
                        if(responseText==""){
                            errDiv.removeClassName('errors');
                            parent.removeClassName('errors');

                        }
                        else{
                            errDiv.addClassName('errors');
                            parent.addClassName('errors');
                        }
                }
            });
        });
    });
}); 

Am I doing something wrong? Or if this is expected behavior, is there any workaround? The expected result should be a form submission, no matter if the DOM is modified or not after the button's click.