Wednesday, November 5, 2008

Trick in AjaxForm

There is a small problem in using AjaxForm or any other Ajax tools, that is the visitor may cause JavaScript errors to be displayed if he/she triggers a function call before the JavaScript libraries or tools loads completely (Of course only if you try to load the JavaScript files dynamically!).
In the case of AjaxForm, it is possible that the user click submit button while the AjaxForm or Prototype is not loaded.
Solution is to prevent the user to submit the form before the libraries (JS files are loaded). So you must hide the submit button by setting its CSS attribute visibility to hidden. The AjaxForm object will make it visible automatically as soon as it is created.
So you should write the form this way:


<form id="form1">
username:
<input type="text" id="username" name="username" />
<br />
password:
<input type="password" id="password" name="password" />
<br />
<input style="visibility: hidden" type="submit" value="send" />
<input type="reset" value="reset" />
</form>

No comments: