Enable or disable login button in foundation

debugcn Published at Dev

t9lp

I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.

<form data-abide="ajax">
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Login" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Password" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <a href="#" class="button tiny disabled">Log in</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#" class="button tiny">Register</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#">Forgot password?</a>
  </div>
 </div>
</form>

Cameron Chapman

You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.

http://jsfiddle.net/fFLq4/

Add a couple element id's to your elements:

<form data-abide="ajax">
 <div class="row">
  <div class="large-12 columns">
   <input type="text" id="loginTxtBox" placeholder="Login" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns">
   <input type="text" placeholder="Password" />
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <a href="#" id="loginButton" class="button tiny disabled">Log in</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#" class="button tiny">Register</a>
  </div>
 </div>
 <div class="row">
  <div class="large-12 columns text-center">
   <br /><a href="#">Forgot password?</a>
  </div>
 </div>
</form>

And add the javascript function to listen for the keypress:

var textBox = document.getElementById("loginTxtBox");

textBox.onkeypress=function(textBox){
    if(this.value.length >= 5)
    {
        document.getElementById("loginButton").className = "button tiny";
    }
    else
    {
        document.getElementById("loginButton").className = "button tiny disabled";
    }
};

This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.

Collected from the Internet

Please contact [email protected] to delete if infringement.