Forum | Appery.io

How can I gray out a button if a input field is blank?

Please be as detailed as possible... Still learning here.

Do you want to do something like this but with an input field: http://gotiggr.com/preview/24099/mob-...

Yes . . . just want it grayed out like that unless they have typed into the input field.

On page load, run this JavaScript:

code
var button = Tiggr('button');
button.addClass('ui-disabled');
/code

Add 'value change' event to input field and run this JavaScript:

code
var input = Tiggr('input').val();
var button = Tiggr('button');

if (input == '') {
button.addClass('ui-disabled');
}
else {
button.removeClass('ui-disabled');
}
/code

Input field name is 'input', button name is 'button'.

Sample app: http://gotiggr.com/preview/24099/mob-...

I am good with the second step here, but how do I set the first part on page load? I am not seeing an option for a javascript.

Click outside the phone frame, switch to Events tab. You will be able to add load event and then Run Custom JavaScript action.

Thanks for this Max.

Ok I have 3 fields on a registration form that I want the user to fill before the register button becomes enabled. Username, Password, Email

1. When i put the code as explained in this topic, I noticed that if the user just fills one of the fields the register button is enabled.

   username on value change code:
   precode
   var input = Tiggr('username').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {
   button.removeClass('ui-disabled');
   }
   /code/pre

   Password on value change code:
   precode
   var input = Tiggr('password').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {
   button.removeClass('ui-disabled');
   }
   /code/pre

   Email on value change code:
   precodeemail').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {
   button.removeClass('ui-disabled');
   }
   /code/pre

2. I then did some changes by removing the else part on the username and password and leaving it on the email field only. But the problem with this approach is that if the user just fills in the email field and leaves the username and password blank the register button is enabled.

   username on value change code:
   precode
   var input = Tiggr('username').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {

   }
   /code/pre

   Password on value change code:
   precode
   var input = Tiggr('password').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {

   }
   /code/pre

   Email on value change code:
   precodeemail').val();
   var button = Tiggr('registerbutton');

   if (input == '') {
   button.addClass('ui-disabled');
   }
   else {
   button.removeClass('ui-disabled');
   }
   /code/pre

   Is there away to enable the register button only when all the fields are filled?

Hello! You have to check all the input fields. Better to check it for all three inputs, because if the user fills first Email field and then fields above - the button will stay disabled.
For example create function checkInputs(){} and check there all three inputs. Then call that function on "value change" input fields.

Ok Thanks I'll give it a try.