Angular ng-disabled button on page load - javascript

I'm using Angular and I have a button with an ng-disabled attribute that disables it until the user enters text in two text fields:
<input ng-model="name" type="text">
<input ng-model="password" type="password">
<input ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
This works fine, however when the page first loads the button is enabled for a fraction of a second while angular loads and the browser processes the condition.
I want the button to be disabled from the instant the page loads and only enabled once the user enters text in those two fields.
Does anyone know if there is a solution to this?

If you want the input to be already disabled even when angular is still loading, then make the input already disabled:
<input disabled ng-disabled="name == '' || password == ''" type="submit" value="Log in" />
However, if you want the input to be disabled to avoid the user clicking it before angular makes it disabled due to security reasons, take note this is useless. Any user with a minimum knowledge can use the browser console to remove the disabled from the input and click if they want to.
This is just aesthetics, and I personally would encourage you trying to understand why the button is taking so long to get disabled. It shouldn't take long enough so users could notice it.

Related

How to retain search terms in input field?

I have an input element,
<div>
<input type="text" id="query" autocomplete="off" />
</div>
that triggers an Apache Solr search. Upon submission the input field is cleared (possibly due to a page reload?).
How can I retain the query terms in the input field (or repopulate it, upon submission)?
I suspect the button associated with your page issues a submit (e.g. <button type="submit">Search</button>). If that is your case, you'll need to make sure you put the value the user submitted when you render the page again, you'll do this in the value attribute, e.g.
<div>
<input type="text" id="query" autocomplete="off" value="the-value-the-user-entered" />
</div>
You could also issue an AJAX call when the user issues the search, in which case, the form won't reload and you won't need to worry about this, but then you will need to write the code to issue the AJAX call.

How to make browser save password without redirect?

We have a form with username password inputs and a button. When button is clicked, the form redirects to another url by adding /? to the url current, which is unwanted behavior.
In case we add event.preventDefault(), it prevents the browser from offering to save the username and password (see the picture below, what i mean).
Here is the code. It does not redirect here, because it is inside a snippet.
document.getElementById('send').addEventListener('click', (event) => {
//event.preventDefault()
console.log('test')
})
<form>
<div>
<label for="username">username</label>
<input
id="username"
type="text"
autocomplete="username"
/>
<label for="password">password</label>
<input
id="password"
type="password"
autocomplete="new-password"
/>
</div>
<button id="send">send</button>
</form>
I tried to use div instead of form tag, but it prevents autocomplete from working too.
Also, here you can test the form with browser offering to save password. Copy the code from here
How to prevent redirect on button click and preserve browser's autocomplete functionality?
To prevent redirection on button click, set the type="button" for the button element and that will turn the button element to just an ordinary button, then after then you know that you will be using AJAX to submit the form:
<button id="send" type="button">send</button>
is this the answer you are looking for
I have not checked. But you can try this:
document.getElementById('send').addEventListener('click', (event) => {
console.log('test');
return false;
})
The 'new-password' value used for autocomplete should be preventing autofill since the browser is expecting a new password to be entered there. According to the MDN:
Preventing autofilling with autocomplete="new-password"
If you are defining a user management page where a user can specify a
new password for another person, and therefore you want to prevent
autofilling of password fields, you can use
autocomplete="new-password".
I think this answer may help

Autofilling an input bound with ng-model

I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:
loginModel = {
username: '',
password: ''
};
They are bound to input elements like so:
input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)
input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")
I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled
button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In
The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.
I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello#world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.
Hopefully my question makes sense. Thank you for your help!

How to select a hidden submit button

If a website that has a property to hide a form, how could I be able to press submit? This form has a hidden submit button, but if certain parameters are not correct, it automatically hides this form.
I can see it for a split second until it goes white. I tried firefox inspect element, and it's there, but is there a way to press submit while hidden? I tried pressing tab and hopefully selecting it, but it won't do it.
I'm sure there is a way to basically "push" the submit button while hidden.
Thanks
In jQuery that would be
$("name_of_form).submit();
In vanilla Javascript it should be
document.getElementById(id).submit();
or
document.forms.form_name.submit();
Of course, to retrieve the name you'd open up the browser's dev tool, there's usually an arrow you can click to find the element on the page, or just read the html and find it, and then you'll know the name of the form. This is also where you'll run the command.
Here's an example:
<form action="/weather/searchauto" method="POST" id="latlongForm">
<input id="lat" name="lat" type="hidden" value="">
<input id="long" name="long" type="hidden" value="">
</form>
So in this case the name is "latlongForm", so you can type in the console:
document.forms.latlongForm.submit()
See if that works!

Unable to locate the event handler

I've this html source of this url: https://login.freecharge.in/login?callbackurl=https://checkout.freecharge.in/payment. This page has two input fields - login & password.
I want to locate the handler being called when we key-in the login and password. For example when I type these two values then Sign In button gets enabled:
aaaaaaaaaa#gmail.com
password11233455
In the login textfield if I delete last two characters "om" by pressing Backspace leaving login to "aaaaaaaaaa#gmail.c" then Sign In automatically gets disabled.
Login field code
The html code of the login field looks like this:
<input id="loginEmailMobile" name="loginEmailMobile" autocomplete="loginEmailMobile" type="text" focus-me="vm.focus == 'LOGIN'" focus-delay="200" ng-focus="frmLogin.loginEmailMobile.blured = false" ng-blur="frmLogin.loginEmailMobile.blured = true" required="" ng-model-options="{allowInvalid:true}" ng-model="vm.data.login.emailOrPassword" ng-maxlength="127" ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$" no-space="" class="ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-valid-required ng-invalid ng-invalid-pattern">
Sign-In Button code
<button value="Submit" class="submit disable" ng-class="{'disable':frmLogin.$invalid}" id="signInButton" ng-click="vm.signinClickHandler(frmLogin.$valid)"><span id="textLoginSignIn">SIGN IN</span></button>
Now I've searched loginEmailMobile in all the files and I don't find this except in this code. So who is listening to this element and taking action? How to find it?
This is done via the Angular framework, with the following patter:
ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$"
It means if the input does not look like an email, the field is not valid. Then, you didn't post this code, but most likely on the button there's something like ng-enabled="..." with a condition that checks if the email field is valid.

Categories