I've developed an innovative ajax signup form that integrates jQuery and CSS3.
The unique feature of this form is its multi-step process. In the first step, users are required to enter their email address and password.
What sets this form apart is its ability to customize the next step based on the domain of the email address provided. I have identified a specific domain for which I want to display specialized content:
- Special Option 1
For all other domains such as Gmail, Live, Hotmail, etc., the form should display general options, with the special domain's content hidden. Here are some examples of general options:
- General Option 1
- General Option 2
- General Option 3
I attempted to implement the following code, but unfortunately, it does not seem to be functioning correctly. Despite confirming that my element references are accurate, the code fails to trigger:
var idx = emailaddress.lastIndexOf('@');
if (idx > -1 && emailaddress.slice(idx) === 'premiumcars.co.uk')
{ function swap(special, general) {
document.getElementById(special).style.display = 'block';
document.getElementById(general).style.display = 'none';
}}
The idea behind this implementation was to segregate the general content within a generic div element and the special content within a designated div element. By utilizing a JavaScript function to identify the domain initially and then switch between elements, the desired result could be achieved.