form.submit() taking more time when there is large amount data is there to submit

Question

We have a web page which enables the users to compose email and send. The HTML composer we use is FCK Editor. When they compose and say send

1. We validate the email and subject.
2. To avoid the user not to further manipulate the form we hide the whole form and enable another DIV which says "Mail sending...Please wait"
3. We submit the form

After the submit is done in the result page we say

"Mail sent successfully"

If we load large amount of HTML content in the FCK Editor and saye send. The result is as follows...........

1. We validate the email and subject

   This happens fast

2. To avoid the user not to further manipulate the form we hide the whole form and enable another DIV which says "Mail sending...Please wait"

   This Div is not enabled

3. We submit the form

   This is taking more time to submit. Until form get submits the "Mail sending...Please wait" div is not shown.

Is there any way we can solve this, either the submit should happen fast or else the DIV should be shown so that there will be a communication to the user that it being processed.

There is a DIV named main_div in which we have

1. To Email - Text Box
2. Subject - Text Box
3. HTML editor - FCK Editor
4. Send - Button

We have another DIV named loadingDiv which has

"Mail sending...Please wait"

When send is clicked here is the java script we call

function sendMailClick(form,temp) {

document.getElementById('main_div').style.display = 'none';

document.getElementById('loadingDiv').style.display = 'block';

form.api.value = temp;

form.submit();

}

Answer 1

Apparently there's an issue in the JS code responsible for displaying the div. Maybe it is not been executed properly or it cannot seem to locate the div element or the way you're using to display it is wrong?

At any way, here's a kickoff example which should work:

<form id="form" onsubmit="processSubmit(this);"><input type="submit"></form>
<div id="progress" style="display: none;">submit in progress..</div>

with

<script>
    function processSubmit(form) {
        validate(form);
        form.style.display = 'none';
        document.getElementById('progress').style.display = 'block';
    }
</script>

That's basically all.

Using a JS debugger like Firebug should give a lot of new insights of what's going on in the JS code.