Forum | Appery.io

hi,

I have a Search Component on my page and I want it to execute an event as the user types something into the box. In other words it's a dynamic filter. I was wondering which event will be most appropriate for this. I am guessing keyup should be fine. Any thoughts or suggestions?

M&M,

Keydown or keypress should do the trick.
Please don't use value change cause it will be triggered, when input loses focus and have a new value.

oke thanks Evgene

Hi Team,

Im trying to disabled the button if the textinput has no value, and enabled it when the button detect that the textinput has a value.
the code that i was inputting is not working. i dont know why but its all correct. there's no error in console. i hope you can help me.

this code is in pageshow:
//Apperyio('btnsignin').attr('disabled', 'disabled');<<< this is not working
$("[dsid='btnsignin']").addClass('ui-disabled');
this code is in txtinput keyup:
var x = Appery("txtUN").val();
var y = Appery("txtPW").val();
if((x!== '') && (y!=='')) {
$("[dsid='btnsignin']").addClass('ui-enabled');
}
i hope you can help me here. Thanks

There are 2 ways you can enable or disable buttons

code
&#47;&#47; Method 1
$("[dsid='btnsignin']")&#46;addClass('ui-disabled'); &#47;&#47; Disable a button
$("[dsid='btnsignin']")&#46;removeClass('ui-disabled'); &#47;&#47; Enable a button

&#47;&#47; Method 2
Appery('btnsignin')&#46;attr('disabled', 'disabled'); &#47;&#47; Disable a button
Appery('btnsignin')&#46;attr('disabled', null); &#47;&#47; Enable a button
/code

I'd suggest that you check the length of the variable - for example x, y and if the length is greater than zero, then enable the button, else disable it.

And you need to use the event in the "Input" event of the input component so that as the user types or erases text from the input component, it will fire the event and subsequently enable / disable the button

Hi M&M

Thank you for responding, Yes i already tried that with this code:

var x = Appery("txtUN");
var y = Appery("txtPW");
if ((x.length 0) && (y.length 0)){

$("[dsid='btnsignin']").removeClass('ui-disabled'); 
 } else { 
      $("[dsid='btnsignin']").addClass('ui-disabled');  
 } 

but nothings happens.

Hi She -

I'm not sure what this two lines of code are doing:
pre
code
&#46;&#46;&#46;
var x = Appery("txtUN")&#46;val();
var y = Appery("txtPW")&#46;val();
&#46;&#46;&#46;
/code
/pre
if you are saying that you checking only one input element.

Also please note if you are making a conditional check on the page show event it will runs only once upon the page is loading and shown.
You will need to make additional conditional check if the input element values has changed.

hi,

Firstly you have missed the .val();

// Also declare a global flag to keep track of button state, whether it is enabled or disabled.
code
var btnSignInEnabled = true;
/code

code
var x = Apperyio("txtUN")&#46;val()&#46;trim(); &#47;&#47; Trim to remove spaces
var y = Apperyio("txtPW")&#46;val()&#46;trim(); &#47;&#47; Trim to remove spaces

if ((x&#46;length > 0) && (y&#46;length > 0)){
if (btnSignInEnabled !== true) { &#47;&#47; If button is not enabled, enable it
btnSignInEnabled = true;
$("[dsid='btnsignin']")&#46;removeClass('ui-disabled');
}
} else {
if (btnSignInEnabled !== false) { &#47;&#47; If button if not disabled, disable it
btnSignInEnabled = false;
$("[dsid='btnsignin']")&#46;addClass('ui-disabled');
}
}
/code

Use the above JS code in the "Input" event of both txtUN and txtPW

And ya in the beginning remember to call this event once, upon page show event. Because in the beginning your input boxes will be empty and you want the sign in button to be disabled.

now im so confuse, because i dont know how to declare global flag. .<

It's pretty simple. Just declare the variable at a global level in your JavaScript asset / file.

In short before you begin / declare any of your functions, declare a variable by that name

code
var btnSignInEnabled = true;

function otherFunctions() {
&#46;&#46;&#46;
var x = Appery("txtUN")&#46;val();
var y = Appery("txtPW")&#46;val();
&#46;&#46;&#46;
}
/code