|
Hi,
i am trying to get an info div on pressing the submit button, thats because if large forms are being validated, it takes a while, and i want to show the user that there is still interaction.
what i did:
1 - Optimize the forms.xml, to make it quicker, it works!
2 - create an div
</div>
<div align="center" id="formcheck_1" style="display:none;">
<img src="../../../hob_grfx/loader/3ma.gif" /><br />
Form is checked one moment please...<br />
</div>
3 - call the div if submit is pressed in the forms.xml with the following code
<s:event b:on="submit">
<s:task b:action="js" b:value="document.getElementById('formcheck').style.display = 'inline'" />
<s:task b:action="js" b:value="document.getElementById('formcheck_1').style.display = 'inline'" />
<s:choose>
<s:when b:test=".//b:step">
<s:task b:action="send" />
</s:when>
<s:otherwise>
<s:task b:action="trigger" b:target=".//*" b:event="validate" />
<s:choose>
<s:when b:test=".//*[@b:valid = 'false' or @b:valid='required']">
<s:task b:action="js" b:value="document.getElementById('formcheck_1').style.display = 'none'" />
<s:task b:action="alert" b:value="Error in the form, please check!" />
<s:task b:action="js" b:value="document.getElementById('formcheck').style.display = 'none'" />
</s:when>
<s:otherwise>
<s:task b:action="send" />
</s:otherwise>
</s:choose>
</s:otherwise>
</s:choose>
</s:event>
</s:behavior>
This all works fine, i blurred the first div, so it looks really great, but now my question,
As the submit button is pressed, it seems to me that something internal is starting, because my div with information is not directly loaded, on large forms it takes about 2-3 seconds on which happens apparently nothing and then the div is showed.
What i am thinking now, since i cant solve this problem, is that the submit call, is an bpc internal thing, that first start to validate the form, then it works off the rest of the code.
Am i right concluding this? Is there a way on how i override this?
Thanks
I'm not sure what exactly
26 June, 2008 - 10:57 — RusI'm not sure what exactly you are going to do, but to prevent the form submit normally use something like this:
function show_preloader() {
// show your div with preloader image here
}
function start_form_checking(oForm) {
// Check the form fields here
window.form_checked = true;
oForm.submit();
}
</script>
<form onsubmit="if (!window.form_checked) { show_preloader(); start_form_checking(this); return false; } else window.form_checked = false;">
</form>