Включить или отключить кнопку входа в фундамент

Question

Я использую front-end framework Foundation. Как я могу в этом меню включить кнопку входа в систему, только если вход и пароль ввода заполнены текстом.

<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> 

Answer 1

Вы можете добавить функцию, чтобы посмотреть прослушиватель onkeypress для поля ввода. Вот рабочая скрипка о том, как это сделать на имени пользователя, и вы можете сделать что-то подобное для ввода пароля.

http://jsfiddle.net/fFLq4/

добавить пару элементов идентификаторов для ваших элементов:

<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> 

И добавить яваскрипт функции прослушивания для нажатия клавиши:

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"; 
    } 
}; 

Это будет только активировать вашу кнопку входа как только у вас будет не менее 5 символов. Примените это также к вашему паролю.

Answer 2

Если я правильно понял это, вы хотели бы показать форму входа только в том случае, если пользователь нажимает на ссылку для входа.

Для этого я предлагаю перемещать ссылки за пределы и использовать любой из них (toggle/show/slide) в jQuery, чтобы показывать его по щелчку.

Вот измененное HTML:

<form id="loginForm" 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> 
</form> 

<div class="row"> 
    <div class="large-12 columns text-center"> 
    <a id="login" 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> 

А вот рабочая скрипку, как показать/скрыть форму входа:

http://jsfiddle.net/9C4s7/

Закомментированный линия js переключает слайд (нажатие на ссылку отобразит форму, щелчок ее снова скроет). Активная строка будет только сдвигаться вниз после щелчка. Итак, вы идете вперед и выбираете то, что лучше всего подходит для вас!