How to toggle between 2 forms in JQUERY-CodePudding

i am new to Jquery. I am trying to load a HTML with with 2 forms. I need to display only when form when page is loaded but as user clicks the switch button i want it to hide form1 and display form 2 but it hides form1 when button is checked but does not display form2. here is my code

$(document).ready(function() {
  var $form1 = $('#form1'),
    $form2 = $('#form2'),
    $form2.hide();

  $("#customSwitch1").click(function() {
    if ($form2.is(':visible')) {
      $form1.hide()
      $form2.show()
    } else {
      $form1.show()
    }
  });
});

/* The switch - the box around the slider */

#customSwitch1 {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">
    <h6>Switch to form2</h6>
  </label>
</div>

<form id='form1' name='form1' method="" action="">
  <input type="text">
</form>

<form id='form2' name='form2' method="" action="">
  <input type="text">
</form>

CodePudding user response：

may this will help you.

$(document).ready(function(){
    $('.login-box .nav li').click(function(){
        id = $(this).attr('id');
        $('.login-box .nav li.selected, .login-box form.selected').removeClass('selected');
        $('#'   id   ', .login-box form.'   id).addClass('selected');
        $('.login-box form.'   id   ' input').first().focus();
    });
    $('.login-box form .input input').on("focus", function(){
       $(this).parent('.input').addClass('selected'); 
    }).blur(function(){
        $(this).parent('.input').removeClass('selected');
        if($(this).val() !== "")
            $(this).parent('.input').addClass('good');
    });
});

.login-box,
.login-box .nav,
.login-box .nav li,
.login-box form .input,
.login-box .social-media,
.login-box .social-media li,
.login-box form .input .icon,
.login-box form .input label,
.login-box form .input input{
    margin:0;
    padding:0;
    transition:300ms cubic-bezier(.4, 0, .2, 1);
    -o-transition:300ms cubic-bezier(.4, 0, .2, 1);
    -ms-transition:300ms cubic-bezier(.4, 0, .2, 1);
    -moz-transition:300ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition:300ms cubic-bezier(.4, 0, .2, 1);
}
.login-box{
    position:absolute;
    top:20px;
    left:50%;
    width:100%;
    max-width:400px;
    transform:translateX(-50%);
    font-family:'Titillium Web', sans-serif;
    background:#29292E;
    text-align:center;
    color:#F0F0F0;
    border-radius: 15px;
    box-shadow: 1px 1px 10px black;
    overflow:hidden;
}
.login-box .nav{
    position:relative;
    width:100%;
    line-height:40px;
    display:table;
    list-style:none;
    color:grey;
    margin-bottom:10px;
}
.login-box .nav li{
    position:relative;
    display:table-cell;
    width:50%;
    cursor:pointer;
    background:#141414;
    background:rgba(20, 20, 20, .7);
}
.login-box .nav li.selected, .login-box .nav li:hover{
    border-bottom:1px solid #006DFF;
    color:#F0F0F0;
    background:none;
}

.login-box .social-media{
    position:relative;
    display:block;
    width:calc(100% - 40px);
    padding:0 20px;
    list-style:none;
    line-height:40px;
    margin-top:5px;
    margin-bottom:25px;
}
.login-box .social-media li{
    position:relative;
    margin:0 4px;
    display:inline-block;
    width:calc(33.3333% - 12px);
    max-width:120px;
    background:Red;
    border-radius:5px;
}
.login-box .social-media li a{
    display:block;
    color:#F0F0F0;
    height:40px;
}
.login-box .social-media li a i{
    line-height:40px;
    font-size:20px;
}
.login-box .social-media li.facebook{
    background:#3B5998;
    background:rgba(59, 89, 152, .5);
}
.login-box .social-media li.facebook:hover{
    background:#3B5998;
    background:rgba(59, 89, 152, 1);
}
.login-box .social-media li.google{
    background:#CC3333;
    background:rgba(221, 75, 57, .5);
}
.login-box .social-media li.google:hover{
    background:#CC3333;
    background:rgba(221, 75, 57, 1);
}
.login-box .social-media li.twitter{
    background:#1DA1F2;
    background:rgba(29, 161, 242, .5);
}
.login-box .social-media li.twitter:hover{
    background:#1DA1F2;
    background:rgba(29, 161, 2422, 1);
}
.login-box .title{
    position:relative;
    font-size:14px;
    text-shadow:1px 1px 1px black;
}
.login-box form{
    display:none;
    position:relative;
    padding:0 20px;
    overflow:hidden;
    margin:20px 0;
}
.login-box form.selected{
    display:block;
}
.login-box form .input{
    position:relative;
    width:100%;
    margin-bottom:10px;
    border-bottom:1px solid grey;
}
.login-box form .input input,
.login-box form .input label{
    position:relative;
    display:block;
    width:100%;
    background:none;
    border:none;
    outline:none;
    color:grey;
    padding:0 25px;
    font-size:20px;
}
.login-box form .input input{
    line-height:30px;
    z-index:1;
    padding-top:10px;
}
.login-box form .input label{
    position: absolute;
    left:0;
    text-align:left;
    z-index: 2;
    cursor: pointer;
    line-height: 55px;
}
.login-box form .input .icon{
    position:absolute;
    top:10px;
    left:-150px;
}
.login-box form .input .icon{
    font-size:18px;
}
.login-box form .input .underline{
    position:absolute;
    top:100%;
    left:0;
    width:0%;
    height:1px;
    background:#006DFF;
    transition:500ms cubic-bezier(.4, 0, .2, 1);
    -o-transition:500ms cubic-bezier(.4, 0, .2, 1);
    -ms-transition:500ms cubic-bezier(.4, 0, .2, 1);
    -moz-transition:500ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition:500ms cubic-bezier(.4, 0, .2, 1);
}
.login-box form .input.good input,
.login-box form .input.good label,
.login-box form .input.selected input,
.login-box form .input.selected label{
    color:#F0F0F0;
}
.login-box form .input.good label,
.login-box form .input.selected label{
    padding:0;
    font-size:12px;
    line-height:0px;
}
.login-box form .input.good .icon,
.login-box form .input.selected .icon{
    left:0;
    color:#F0F0F0;
}
.login-box form .input.selected .underline{
    width:100%;
}
.login-box form .input.good .underline{
    left:auto;
    right:0;
    width:0%;
}
.login-box form .input.submit{
    margin-top:30px;
    border:none;
}
.login-box form .input input[type="submit"]{
    color:grey;
    height:40px;
    background:#141414;
    background:rgba(20, 20, 20, .7);
    padding:0;
}
.login-box form .input input[type="submit"]:hover{
    box-shadow:inset 100px 0 100px 0 #006DFF;
    cursor:pointer;
    padding-left:10px;
    color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='login-box'>
    <ul class='nav'>
        <li class='selected' id='login-form'>Login</li>
        <li id='register-form'>Register</li>
    </ul>
    <form class='login-form selected'>
        <span class='title'>Please Enter Your Login Details:<br><br></span>
        <div class='input'>
            <label for='log-username'>Username</label>
            <input type='text' name='log-username' id='log-username'/>
            <span class='icon'><i class='fa fa-user-o'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input'>
            <label for='log-password'>Password</label>
            <input type='password' name='log-password' id='log-password'/>
            <span class='icon'><i class='fa fa-eye-slash'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input submit'>
            <input type='submit' name='login' id='login' value='Login' disabled />
        </div>
    </form>
    <form class='register-form'>
        <span class='title'>Please Register to Login:<br><br></span>
        <div class='input'>
            <label for='reg-username'>Username</label>
            <input type='text' name='reg-username' id='reg-username'/>
            <span class='icon'><i class='fa fa-user-o'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input'>
            <label for='reg-email'>E-Mail Address</label>
            <input type='email' name='reg-email' id='reg-email'/>
            <span class='icon'><i class='fa fa-envelope-o'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input'>
            <label for='reg-password'>Password</label>
            <input type='password' name='reg-password' id='reg-password'/>
            <span class='icon'><i class='fa fa-eye-slash'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input'>
            <label for='reg-conf'>Confirm Password</label>
            <input type='password' name='reg-conf' id='reg-conf'/>
            <span class='icon'><i class='fa fa-eye-slash'></i></span>
            <div class='underline'></div>
        </div>
        <div class='input submit'>
            <input type='submit' name='register' id='register' value='Register' disabled />
        </div>
    </form>
</div>

CodePudding user response：

I added placeholders to the form inputs

const $form1 = $('#form1');
const $form2 = $('#form2');

//hide second form by default
$(document).ready(function() {
  $form2.hide();
})

//toggle between form1 & form2
document.querySelector("#customSwitch1").addEventListener("change", () => {
  $form1.toggle()
  $form2.toggle()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">
   <h6>Switch to form2</h6>
  </label>
</div>
<form id='form1' name='form1' method="" action="">
  <input type="text" placeholder="form1">
</form>
<form id='form2' name='form2' method="" action="">
  <input type="text" placeholder="form2">
</form>

CodePudding user response：

The two issues in your existing code is that you are using , instead of ; to separate your statements, which is resulting in a syntax error in the snippet you provided, and you also need to call $form2.hide() in the else condition.

That being said, the code can be made more succinct by using toggle() to set the state of both forms based on the checked property of the checkbox.

Also, you should use CSS to hide the #form2 element by default to avoid any possibility of a FOUC, and also hook to the change event of the checkbox instead of click so that your code still works for users who navigate the web using their keyboard.

With all that said, try this:

jQuery($ => {
  let $form1 = $('#form1');
  let $form2 = $('#form2');

  $("#customSwitch1").on('change', e => {
    $form1.toggle(!e.target.checked);
    $form2.toggle(e.target.checked);
  });
});

#customSwitch1 {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 10px;
}

#form2 { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">
      <h6>Switch to form2</h6>
    </label>
</div>

<form id="form1" name="form1" method="" action="">
  <h3>Form 1</h3>
  <input type="text" placeholder="form 1 value..." />
</form>

<form id="form2" name="form2" method="" action="">
  <h3>Form 2</h3>
  <input type="text" placeholder="form 2 value..." />
</form>