CODEWITHSUNDEEP
javascriptjquery
Shaan
Shaan

Reputation: 483

jQuery hide toggle form fields

I've login/register toggle form. I have one button that triggers from login to register and vice versa. When it switch from login to register, it always shows login fields also. I' m interested to hide the login fields when user is visiting register form.

How can I do that?

Blade

<form id="login_form">

  <input id="email" type="email" placeholder="email address">
  <input id="password" type="password" placeholder="password">

</form>

<form id="register_form">

  <input disabled type="text" class="input" id="last-name" placeholder="Last Name">
  <input disabled type="text" class="input" id="email1" placeholder="E-mail Address">

</form>

      <a href="#" class="register">Register!</a> //.register triggers the other form

Javascript

$.fn.toggleDisabled = function() {
    return this.each(function() {
        this.disabled = !this.disabled;
    });
};

$.fn.toggleAttr = function(a, v1, v2) {
    return this.each(function() {
        var $t = $(this),
            v  = $t.attr(a) === v1 ? v2 : v1;
        $t.attr(a, v)
    });
};


$('.register').click(function(){

    // Toggle register form and enable inputs
    $('.register-form').slideToggle({
    easing: 'eioe',
        duration: 250
    }).find('input').toggleDisabled();

    var $su = $('.register');
    $su.toggleAttr('href','register.htm','login.htm')
    var signupLinkText = $su.text() === "Register!"
        ? "Login!"
        : "Register!";
    $su.text(signupLinkText);

Upvotes: 1

Views: 65

Answers (1)

tarkh
tarkh

Reputation: 2559

Is this what you trying to do? I've swapped some of your methods, because their not from jQuery.
UPD: just saw you updated your question with proper functions that was missing, but anyway you can get the point from the code below

document.addEventListener("DOMContentLoaded", function() {
  // Extend jquery with text toggle function
  $.fn.extend({ toggleText: function(a, b) {
        return this.text(this.text() == b ? a : b);
  }});

  // Set register shortcut
  var $su = $('.register');
  
  $su.click(function() {
    // Toggle whole register form with regular jQuery toggle
    $('form').toggle();
    // Toggle switch text
    $su.toggleText('Register!', 'Login!');
  });
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<form id="login_form" action="login.htm">
  <input id="email" type="email" placeholder="email address">
  <input id="password" type="password" placeholder="password">
  <button type="submit">Login</button>
</form>

<form id="register_form" action="register.htm" style="display:none">
  <input disabled type="text" class="input" id="last-name" placeholder="Last Name">
  <input disabled type="text" class="input" id="email1" placeholder="E-mail Address">
  <button type="submit">Register</button>
</form>

<a href="#" class="register">Register!</a>

Upvotes: 2

Related Questions