I have simple login form in my website. In given requirements stands, that password mustn't been sent to server, but only MD5 hash. I took simple MD5 function and now, when with onClick on submit button I change hidden text from password to md5(password). This works fine, but user sees, that something with his password is happening. I would like to make it transparent and change this particular part of form dynamically with onPost (or smth like this) callback.
I can't find any tutorials how to deal with manipulating POST table/form in javascript (jquery?) so if anyone could help I would appreciate.
As far as I know input fields that don't have name don't get submitted to the server. So you could have a hidden field and in the onsubmit event of the form copy the value of the password field into the hidden field by applying the MD5 checksum:
<form method="post" action="/login">
<input type="password" id="password" />
<input type="hidden" name="password" id="hiddenpassword" />
<input type="submit" value="Login" />
</form>
and then:
$('form').submit(function() {
var password = $('#password').val();
var md5 = MD5(password);
$('#hiddenpassword').val(md5);
return true;
});
Related
I'm making this form that, for now, redirects, a user to another page after submitting a form. However, after the user is redirected, the form fields pop up in the url. I'm a beginner and I was wondering on how I can keep the url path to just what I specified in the "action" attribute of the form. Here's my code
<div>
<form action="/test">
<input type="text" name="login-username" id="login-username" placeholder="Username" />
<input type="password" name="login-password" id="login-password" placeholder="Password" />
<input type="submit" name="login-submit-button" id="login-submit-button" />
</form>
</div>
After clicking the button, the url looks like this:
http://localhost:3000/test?login-username=&login-password=&login-submit-button=Submit
How can I keep it to just
http://localhost:3000/test
As mentioned clearly in this answer, default method of form on submit is GET with encoding of type x-www-form-urlencoded, which basically appends input data to the current URL.
Using method POST appends form-data inside the body of the HTTP request (data is not shown in URL).
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
Literally, I want to turn off password saving popup in the browser.
Many answers said that use autoComplete. But I think autoComplete doesnt' work anymore.
I want to know the recent technic for this problem.
Could you recommend some advice for this?
Thank you so much for reading it.
Here's how I do it
On submit:
Save the password from the input field
Clear the password input field
Set the input field to type="text"
handle the form submission using AJAX
This works 100% - but is a little fiddly - though, easy enough
here's how you could handle a bit easier than I described - given you aren't doing any AJAX in your login
<form action="/login" method="post" name="loginform">
<input type="text" name="username" />
<input type="password" name="input_password" />
<input type="hidden" name="password" />
<input type="submit" value="login" />
</form>
document.forms.loginform.addEventListener('submit', function() {
const {
input_password,
password
} = this.elements;
password.value = input_password.value;
input_password.value = '';
input_password.type = 'text';
});
If your login already does some AJAX, then the principal is the same, but you won't need a hidden field
it's not something you can do in your own code, it's a browser behavior, You can only achieve this by changing your browser settings. disable browser password manager
If you want to do it in your code, I think you can try something like, do not give your input element attributes name, id, type common value - do not name them as password, email, etc, to cheat the browser build-in password saving feature.
So, i'm really new to HTML and javascript, and I want to take values from a form and process them with a script. I have a couple of fields including username, password, and two confirm password fields in HTML. With javascript I want to collect the username, and check if the password field is filled out. If it is, I want to make var ispass equal to 'yespass' or 'nopass'. When I submit the form, I want to go the url http://www.example.com?un=username&pass=yespass (or nopass).
Javascript:
<script language="javascript" type="text/javascript">
function processFormData(){
var user = document.getElementById('username').value;
var pass = document.getElementById('password').value;
var ispass;
if (pass.length > 0){
ispass = "yespass";
}else{
ispass = "nopass";
}
return "http://www.example.com?un=" + user + "&pw=" + ispass;
</script>
HTML:
<form onsubmit="window.location.href=processFormData();">
Please enter your current e-mail address and password below.<br><br>
<input type="text" id="username" placeholder="E-mail Address"><br><br>
<input type="password" id="oldpassword" placeholder="Old Password"><br><br><br>
Please type your new password below:<br><br>
<input type="password" id="newpassword1" placeholder="New Password"><br><br>
<input type="password" id="newpassword2" placeholder="Confirm New Password"><br><br>
<input type="submit" id="gobutton" value="Reset Password"/>
</form>
I cannot figure out a proper way to do this, because this does not seem to be working at all. Any suggestions or recommendations?
You could pull this off with a hidden form field and an onchange event:
<input type="hidden" id="ispass" value="no" onchange="checkPass(this);" />
This input would go in your form. Then on your password field, add an onchange handler:
function checkPass(input) {
document.getElementById("ispass").value = "yes"
};
Also, if you set the method on your form, submitting the form can generate the url based on the form inputs:
<form method='get' action='...' />
Here's a jsfiddle that demonstrates the result.
Also, if you're new to javascript, you may want to look into a library like jQuery to simplify some of your interaction with the page. It's really easy to learn, and there's a great community around it to help with any problems you might run into.
HTH,
Aaron
I have a simple javascript that I can't seem to get to work.
So what I'm trying to accomplish is a text field on my homepage that the user can type in(just 1 field). Submit it and it'll take them to another page with a text field that is pre filled with what they already typed in the first field.
<script type="text/javascript">
function go_page(page)
{
document.location.href = '/?page_id=11' + '#addressInput=' + addressInput;
}
</script>
When i fill in the 'addressInput' (for this example, lets say '90501')..
Currently, the url comes up as www.mywebsite.com/?addressInput=90501
Goal, i want it to be.. www.mywebsite.com/?page_id=11#addressInput=90501
This 'goal url' works when i type it in the address bar. I just need to figure out how to do that function automatically for the user..based on what they input in the first text field.
...any ideas?
EDIT 1
Here is the form code..
<form method="get" onsubmit=" go_page(this.page.value); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
EDIT 2
just more info..
The user will be on the homepage and type in an 'address/zip code' in the text field and click submit.
Which will then take them to the locations page(page_id=11) that has a text field that's pre-populated with the 'address/zip' the user typed in on the homepage.
You could try grabbing the element in the form like this
<form method="get" onsubmit="go_page(this.addressInput); return false">
<input type="text" name="addressInput" id="addressInput" size="30" />
<input type="submit" value="" class="submitButton" />
</form>
And extracting the value of addressInput inside your function like this
function go_page(elem) {
var addressInput = elem.value;
window.location.href = "/?page_id=11#addressInput"+addressInput;
}
In Wordpress that should navigate you to the page id and add the hash to the end
Its not clear from the limited information provided, but have you stopped the default form submission behavior? Maybe the form if being submitted before your javascript is called. Capture the form submission and return:false or event.preventDefault() to stop it continuing with the submission.
If you want to have # in the URL, you have to encode it so instead of using # use %23. And do not forget that for separating values in URL you have to use &.
document.location.href = '/?page_id=11' + '%23addressInput=' + addressInput;
Update
Instead of document.location.href use window.location