In this article we are going to create a custom registration form in magento with Ajax functionality. The default magento registration form does the email verification of the user in the server side i.e After form submission. We are going to make it interactive.
Step 1: After creating the basic module,we need to override the default register.phtml and include our own template file. Magento has a built in prototype java script library support i.e prototype.js. In this example we are going to use Ajax with built in prototype.js library. The same result can also be achieved using jQuery but it requires a few more steps and also we need to write jQuery code to avoid conflicting with prototype library.
Step 2: We need a controller action for processing the client request through Ajax, it fetches the email address entered by user and it passes to the controller action. The controller action will check the email with the database and returns a message depending upon the condition.
Step 3: We need a place holder to display the result returned from the controller. Add your event in the email address field, once the email address is typed the email verification result has to be shown immediately to the user.
Step 4: Now we need to pass the Ajax request to the server side i.e controller action. To call the Ajax function we need the server side URL,data and a success message.
The script will be called once the email address is typed and then the value is passed, if the email address already exists the placeholder content will be displayed with the error message other wise it will give the success message that the email is not yet taken.