We Keep Coding

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 link to another page in javascript?

So I am having trouble linking from one page to another in JavaScript. I have the following code.
I am trying to call when users click submit. Below is the form I want users to fill out. I am trying to get to feed.html when users click submit.
function login(){
window.location="feed.html";
}
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username" value="">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login" onClick="login()">
Lost your password?<br>
Don't have an account?
</form>
So I thought it would simply call the function and go to the feed page after clicking submit, but instead it does nothing. Does anyone see what the problem is?

Submitting a form navigates to the page that is the response to the form submission.
Assigning a URL to location navigates to that URL.
So:
Your JavaScript runs
The JS starts navigation to feed.html
The form submits
The form navigates to the current URL (since you didn't specify an action) instead.
The navigation in step 4 replaces the navigation in step 2.
Your options:
Don't use a submit button
Call preventDefault to prevent the default action of clicking on a submit button
Set an action instead of using JavaScript
The last of these choices is probably the sensible one. You have what appears to be a login form. Handling all the authentication logic that decides if the user can login or not inside the browser (which is under the control of the user) instead of on the server is a huge no-no.

You should maybe use the "action" attribute on your form tag.
<form action="feed.html">
...
</form>
This will submit your form and redirect to feed.html.

How do I disable a button until callback is called?

I have a contact form with a button that I want to disable if the form is not valid or a recaptcha is not selected.
<form name="contactForm" data-ng-controller="ContactCtrl" novalidate>
...
<input class="form-control" name="email" type="email" required data-ng-model="contactEmail">
...
<div class="g-recaptcha" data-callback="recaptchaCalled" data-expired-callback="recaptchaExpired" data-sitekey="PULBIC KEY"></div>
...
<input type="checkbox" data-ng-model="recaptchaValid" />
...
<button type="submit" ng-disabled="!recaptchaValid || !contactForm.$valid">Send</button>
This is the controller for the form, and now this callback is being called because the alert happens.
app.controller('ContactCtrl', function($scope) {
$scope.recaptchaValid = false;
recaptchaCalled = function() {
$scope.recaptchaValid = true;
alert('pressed!');
};
});
If I enter a valid email address, the button stays disabled (and checkbox unchecked), I can then click the checkbox and the button enables, uncheck and disables again. - correct behaviour.
If I enter a valid email address and then do the captcha, the button stays disabled (and checkbox unchecked).
If I do the captcha and then enter a valid email the button enables (and checkbox is checked).
If I enter a valid email address and then do the captcha, and then go back and touch the form and force it to revalidate, the button (and checkbox) correctly do their thing.
This seems to indicate there is a refresh that needs to be called. I can't get this up on jsfiddle as I can't get angular working.
I did find this: https://github.com/VividCortex/angular-recaptcha and this on how to integrate it: http://code.ciphertrick.com/2015/05/19/google-recaptcha-with-angularjs/ but its way over the top and I can't work out the bits I need.

After you receive the callback and set the variable in your controller you have to call the $apply() function. Because the callback is from outside Angular, Angular does not know that it needs to update, so you will have to tell it to do so. Now you can use ngDisabled on your button and have it linked to a variable in your controller and you're done.

Why is Symphony CMS not saving the empty input value as such when submitting form via jQuery?

I have the following HTML form, which allows a user to optionally save a custom label for their product.
<form action="http://domain.com/members/systems" method="post" class="mod-SystemLabel-EditForm">
<label class="mod-SystemLabel-EditLabel" for="label-623">Customer label</label>
<input type="text" value="sdff sdf sd" name="fields[customer-label]" class="mod-SystemLabel-EditInput" id="label-623">
Clear
Cancel
<input type="submit" value="Save" name="action[system-edit-label]">
<input type="hidden" value="623" name="id">
</form>
If I manually clear my text input and submit my form, Symphony CMS records the empty value as expected.
If I use jQuery to trigger the form submission as below, Symphony CMS leaves (or re-saves?) the current value as it was.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
//alert($(this).closest('form').serialize());
$(this).closest('form').submit();
});
If I uncomment the commented line, the alert contains:
fields%5Bcustomer-label%5D=&id=623
This serialization is the same as what is produced when I backspace the input myself, so it looks like the actual form submission should be the same as a manual input clearing and click of the submit button.
The Symphony field is not set to be required and does not have any validation rules.
Why is the end result different and how can I get the empty value to be saved, overwriting the previous product label?

The form’s submit input’s name is not passed when the form is submitted via JavaScript, and Symphony CMS uses this to trigger the appropriate event.
To get the event name passed along with the submit input, trigger a “click”.
$('.mod-SystemLabel-OtherButton-clear').click(function(e) {
e.preventDefault();
$(this).siblings('.mod-SystemLabel-EditInput').val('');
$(this).siblings('input[type=submit]').trigger('click');
});