What is the best way to toggle between two forms with JavaScript?

Question

What is the best way to toggle between two forms with JavaScript?

I have designed a login screen with two forms inside one div. The first form contains the login box, while the second form is for registration and is hidden using CSS with display:none;. Below the login button, there is a paragraph with an anchor tag to click for registration. How can I make it so that when you click the anchor tag, it switches from the login form to the register form?

I am at the very beginning stage when it comes to JavaScript.

<div class="login-page">
        <div class="form">
            <form class="register-form">
                <input type="text" placeholder="login"/>
                <input type="password" placeholder="password"/>
                <input type="text" placeholder="e-mail"/>
                <button>create</button>
                <p class="message">Already have an account? <a href="#">Sign in!</a></p>
            </form>
            <form class="login-form">
                <input type="text" placeholder="login"/>
                    <input type="password" placeholder="password"/>
                    <button>Sign in</button>
                    <p class="message">Need an account? <a href="#">Register!</a></p>
            </form>
        </div>
    </div>

I found this code on CodePen but I'm having trouble getting it to work on my website:

<script> $('.message a').click(function(){$('form').animate({height: "toggle", opacity: "toggle"}, "slow");}); </script>

javascript html css

Answer 1

Answer №1

If your script isn't working, one potential reason could be that it is placed within the <head>...</head> section of the document instead of right before the closing </body> tag.

In such a case, the script may fail because the <body>...</body> hasn't finished loading when the script runs. Make sure to check for any errors in your browser's console.

Another possibility is that you loaded jQuery after your custom script, like this:

<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>

Instead, it should be loaded in the correct order, like this:

<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>

Answer 2

If your script isn't working, one potential reason could be that it is placed within the <head>...</head> section of the document instead of right before the closing </body> tag.

In such a case, the script may fail because the <body>...</body> hasn't finished loading when the script runs. Make sure to check for any errors in your browser's console.

Another possibility is that you loaded jQuery after your custom script, like this:

<script>...</script>
<script src="code.jquery.com/jquery-3.3.1.min.js"></script>

Instead, it should be loaded in the correct order, like this:

<script src="code.jquery.com/jquery-3.3.1.min.js"></script>
<script>...</script>

Answer 3

Answer №2

Use some custom styling to conceal the login form.

$('.message a').click(
  function() {
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
  }
 );

.login-form {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
    <div class="form">
        <form class="register-form">
            <input type="text" placeholder="login"/>
            <input type="password" placeholder="password"/>
            <input type="text" placeholder="e-mail"/>
            <button>create</button>
            <p class="message">Already have an account? <a href="#">Sign in!</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="login"/>
                <input type="password" placeholder="password"/>
                <button>Sign in</button>
                <p class="message">Need an account? <a href="#">Register!</a></p>
        </form>
    </div>
</div>

Answer 4

Use some custom styling to conceal the login form.

$('.message a').click(
  function() {
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
  }
 );

.login-form {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-page">
    <div class="form">
        <form class="register-form">
            <input type="text" placeholder="login"/>
            <input type="password" placeholder="password"/>
            <input type="text" placeholder="e-mail"/>
            <button>create</button>
            <p class="message">Already have an account? <a href="#">Sign in!</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="login"/>
                <input type="password" placeholder="password"/>
                <button>Sign in</button>
                <p class="message">Need an account? <a href="#">Register!</a></p>
        </form>
    </div>
</div>

What is the best way to toggle between two forms with JavaScript?

Answer №1

Answer №2

Similar questions

Is there a way to display the product name in the input field when it is selected using the keyboard?

What advantages come from selectively importing a single function from a Node.js package on the backend, rather than importing the entire package?

Implementing RXJS subscription using a Subject object

Efficiently storing multiple file fields in Django with the help of jQuery and Ajax

Adjust the cursor style using Javascript

Exploring the concept of Javascript Objects and the undefined value

Defeat the all-powerful !important tag and enable dialog customization for positioning

The error message "Cannot read property 'addEventListener' of undefined" occurred while trying to register the service worker using `navigator.serviceWorker.register('worker.js')`

The outcome of the AJAX RSS Reader remains unpredictable

``How can I apply styling to a child component in React within a regular HTML element?

Is there a way to apply a blur effect to just the div itself without affecting its contents

Obtain the month, day, or year from a timestamp

Is there a way to limit the height of the tbody element?

Retrieving JavaScript return values in a C# WebBrowser control within a WPF application

The wrapper is failing to extend the full height of the entire page

Having trouble getting the .push() method in JavaScript to function correctly

Unable to retrieve data from file input using jQuery due to undefined property "get(0).files"

Issue with onclick event not being triggered by Javascript function inside constructor

Error: Unable to locate module '@material/core/Grid'

Unlocking Component Variables Beyond the Bounds - Vuejs