Populate hidden field with autocomplete value - javascript

I have an HTML form with a regular text input and a hidden field.
I also have the following code that will populate the hidden field with the value of the text field either when it is changed, or if the text field has a default value (supplied by the page itself):
$(document).ready(function() {
var emailinput = document.getElementById('emailval');
document.getElementById('usernameval').value = emailinput.value;
emailinput.onkeyup = function() {
document.getElementById('usernameval').value = emailinput.value;
}
emailinput.onblur = function() {
document.getElementById('usernameval').value = emailinput.value;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="email" id="emailval" />
<input type="hidden" name="username" id="usernameval" />
This works well, except in the case where the browser autofills the text field. If the user submits the form without changing the textfield.
So my question is, is there any way to have the javascript pull the value from the browser-autofilled text field?

Attach an event handler on the form's submit event, and copy the value of #emailval to #usernameval. For example, let's say your form has the ID, #form:
$('#form').submit(function (event) {
'use strict';
$('#usernameval').val($('#emailval').val());
});
Documentation: https://api.jquery.com/submit/

What is 'input7'? I'm assuming this is a key. You could add another event for when the mouse leaves the input box, to get that value, since the user has to use the mouse to select the value.
Another thing you might want to consider, is turn off autocomplete on that field.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

You could use the form's onsubmit event. Here's the pseudo code:-
form.onsubmit= function(e){
e.preventDefault();
document.getElementById('usernameval').value = document.getElementById('emailval').value;
this.submit();
}

Related

How to mirror an input field to another input field?

I have an input field and multiple input fields, the original input field is the primary field that gets submitted.
So, I need to mirror one field to the main field.
I tried watching the keyup and change events but when the user pastes with the mouse it does not work, because the event is triggered before the user presses paste and not after it.
I am not sure that this is the best way to mirror two fields, so I am asking you if you have better methods of doing it
Is there an event that can be triggered after the paste is pressed?
Instead of triggering on key/mousevents, you could try using an "input" event on the input element you would like to mirror.
const ogInput = document.getElementById("og")
const mirrorInput = document.getElementById("mirror")
ogInput.addEventListener("input", () => {
mirrorInput.value = ogInput.value
})
<input type="text" id="og" />
<input type="text" id="mirror" />

how to make an input field add text after submission

I was wondering if it is possible to have an input field that has a bit of text added to it after the user enters the information they want. EX. a user types youtube.com into a search bar, and the input applies https://www.
You could use an event listener that will change the value of the input field.
Use RegEx to find out if the string (https://www.) has been set before (for instance by copying and pasting the URL).
Here is an example:
document.getElementById('url').addEventListener('keyup', (e) => {
if (!/^(https:\/\/www.)/.test(e.target.value) && e.target.value) {
e.target.value = `https://www.${e.target.value}`;
}
});
<input type="text" id="url">
use blur event
you can run a function after a user leaves the input field
see https://www.w3schools.com/jsref/event_onblur.asp
You need to manipulate the user input for that use javascript. If user presses submit button then don't submit input immediately use event.preventDefault() to stop default action and then change user input if needed after that manually submit it using AJAX.
function manuallySubmit(event){
event.preventDefault();
// manipulate input here
var input = document.getElementById("input").value;
input = "changed value " + input;
console.log(input);
/* AJAX POST request
let xhr = new XMLHttpRequest();
xhr.open('POST','location',true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
data = 'input='+(input);
xhr.send(data);
*/
// window.location.href="newlocation" if you want to redirect
}
<form onsubmit="manuallySubmit(event)" action='#' method="POST">
<input type="text" name="input" id="input" /><br/>
<input type="submit">
</form>

unable to fetch input from input field

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .
This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">
Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

How to detect if user has left the input field?

Suppose I have an input field,
<input id="city" placeholder="city">
and I want to detect whenever user leaves this field. How can I do so?
Normal javascript
var element = document.getElementById("ELEMENT_ID");
element.addEventListener("blur", function() { ... your code here ...});
jQuery
$("#ELEMENT_ID").on("blur", function() { ... your code here ...});
If, by any chance, you're implementing those self-emptying fields with predefined text, use placeholder attribute. If you're changing style based on focus, use :focus CSS selector. Also, change event is emitted if user leaves the field and changed it's contents.
When an element loses focus, the onblur event is fired.
var elem = document.getElementById('city');
elem.addEventListener("blur", function( event ) {
console.log('Elvis has left the city (input)!');
}, true);
https://developer.mozilla.org/en-US/docs/Web/Events/blur

How to take an input and when the submit button is pressed put it into a variable?

Lets say I got some HTML like this
<input type="text" placeholder="Enter Mineral">
<input type = "submit">
I have no idea how to put what is in the text into a javascript variable when the submit button is pressed. I'll use jQuery if that makes it easier.
Use .val() to fetch the value of the input field.
$("input[type=submit]").click(function(e){
e.preventDefault(); // <-------- To stop form submission
var txt = $("input[type=text]").val(); // <----- Fetch value of input field
console.log(txt) // <----------- Check console has the value of the input field.
});

Categories