Wie wird beim Übermitteln des Formulars zur Registerkarte "Login" gewechselt?

Ich habe eine Login-Seite, die zwei Formen hat anmelden und anmelden. Es gibt Tabs, um vom Anmeldeformular zum Anmeldeformular zu wechseln.Wie wird beim Übermitteln des Formulars zur Registerkarte "Login" gewechselt?

Ich möchte wissen, wie kann ich Lenden Formular anzeigen, wenn ich das Anmeldeformular auf klicken Sie auf Start Schaltfläche senden.

Ich versuchte Formularaktion als #login, aber es hat nicht funktioniert.

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Sign-Up/Login Form</title> 
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
    <link rel="stylesheet" href="css/style.css"> 

</head> 

<body> 

<br> 
<h1 align="center"> TASK 2017</h1> 
<div class="form"> 

    <ul class="tab-group"> 
     <li class="tab active"><a href="#signup">Sign Up</a></li> 
     <li class="tab"><a href="#login">Log In</a></li> 
    </ul> 

    <div class="tab-content"> 

     <div id="signup"> 
      <h1>Sign Up for Free</h1> 

      <form action="Login.html" method="post"> 

       <div class="top-row"> 
        <div class="field-wrap"> 
         <label> 
          First Name<span class="req">*</span> 
         </label> 
         <input type="text" required autocomplete="off" /> 
        </div> 

        <div class="field-wrap"> 
         <label> 
          Last Name<span class="req">*</span> 
         </label> 
         <input type="text"required autocomplete="off"/> 
        </div> 
       </div> 

       <div class="field-wrap"> 
        <label> 
         Email Address<span class="req">*</span> 
        </label> 
        <input type="email"required autocomplete="off"/> 
       </div> 

       <div class="field-wrap"> 
        <label> 
         Set A Password<span class="req">*</span> 
        </label> 
        <input type="password"required autocomplete="off"/> 
       </div> 

       <button type="submit" class="button button-block"/>Get Started</button> 

      </form> 

     </div> 

     <div id="login"> 
      <h1>Welcome Back!</h1> 

      <form action="/" method="post"> 

       <div class="field-wrap"> 
        <label> 
         Email Address<span class="req">*</span> 
        </label> 
        <input type="email"required autocomplete="off"/> 
       </div> 

       <div class="field-wrap"> 
        <label> 
         Password<span class="req">*</span> 
        </label> 
        <input type="password"required autocomplete="off"/> 
       </div> 

      <!-- <p class="forgot"><a href="#">Forgot Password?</a></p>--> 

       <button class="button button-block"/>Log In</button> 

      </form> 

     </div> 

    </div><!-- tab-content --> 

</div> <!-- /form --> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

<script src="js/index.js"></script> 

</body> 
</html>

$('.form').find('input, textarea').on('keyup blur focus', function (e) { 

    var $this = $(this), 
     label = $this.prev('label'); 

     if (e.type === 'keyup') { 
      if ($this.val() === '') { 
      label.removeClass('active highlight'); 
     } else { 
      label.addClass('active highlight'); 
     } 
    } else if (e.type === 'blur') { 
     if($this.val() === '') { 
      label.removeClass('active highlight'); 
      } else { 
      label.removeClass('highlight'); 
      } 
    } else if (e.type === 'focus') { 

     if($this.val() === '') { 
      label.removeClass('highlight'); 
      } 
     else if($this.val() !== '') { 
      label.addClass('highlight'); 
      } 
    } 

}); 

$('.tab a').on('click', function (e) { 

    e.preventDefault(); 

    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 

    target = $(this).attr('href'); 

    $('.tab-content > div').not(target).hide(); 

    $(target).fadeIn(600); 

});

Wie dies zu tun? Bitte helfen .. Danke.

Quelle

2017-05-08 Sid

können Sie die aktive Registerkarte ändern, wenn die Seite auf die Registerkarte in der URL geladen wird:

$(document).ready((function() { 
    target = $(this); 
    $('.tab-content > div').not(target).hide(); 

    $(target).fadeIn(600); 

}).bind("#"+(window.location.href.split("#")[1]||"signup")));

Dann können Sie zu http://example.com/login.html#login gehen

Quelle

2017-05-08 11:04:57

ich Ihren Code versucht, aber das Formular einreichen kann ich siehe nur Anmelde- und Login-Buttons, nicht das Login-Formular. @ Jonas w – Sid

@Sid ich bin erst vor ein paar Minuten editiert, hast du den up to date Code ausprobiert? –

ja der aktualisierte Code. Beim Laden der Seite sehe ich jetzt nur Schaltflächen auf beiden Seiten. – Sid

Wie wird beim Übermitteln des Formulars zur Registerkarte "Login" gewechselt?

Antwort

Verwandte Themen