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

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.

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>

The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.

Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

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.

Submit form via AJAX but keep client side validation

In my HTML code I have required fields and regular expression pattern checking using HTML5 attributes. I want to submit my data to my server via AJAX but I have to use e.preventDefault();
Using that, disables all the HTML5 attributes like "required" and "type=email" and the built in HTML5 client side check. Basically the user can just submit an empty form.
Is there a way to make HTML5 first check if the attributes i specified are met, then e.preventDefault from submitting so i can manually submit via AJAX?
$("input[type='submit']#input_submit").click(
function(e) {
//Prevents form from submitting right away:
e.preventDefault();
// Allows or keeps halting form submission process; returns true or false.
validationForm();
});
function validationForm() {
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="lastname">
<p>Last Name</p>
<input type="text" name="lastname" placeholder="Last Name" pattern="[a-zA-Z]+" title="Letters Only" required></input>
</section>
<input id="input_submit" type="submit" value="submit">

If you instead prevent the form submit from happening (instead of the button click), you will get the behaviour you want.
$("form#your_form").on("submit", function(e) {
e.preventDefault();
alert();
});
https://jsfiddle.net/4o8nnkjy/
So in the above example, the alert only happens if the form is valid.

You can change the submit for a button instead.
<input id="button" type="button">
Then, when the user clicks button
$('#button').click(function(){validationForm(input1, input2, etc);});
So, what have to do validationForm function? All you want to do with validations.
function validationForm(input1, input2, input3){
//Make all your validations
//Then, if all is correct, send the data via AJAX
}