How can I bring input field texts to address bar? - javascript

If I type some texts in the input field, how can I bring those texts to address bar ?
for eg : I type abcd to input field, I need address bar like www.google.com/abcd

Try this:
function updateAddressBar() {
const inputValue = document.getElementById("inputField").value;
window.history.replaceState({}, '', `?value=${inputValue}`);
}
<form>
<input type="text" id="inputField" oninput="updateAddressBar()">
</form>
The oninput event is used to call the updateAddressBar function whenever the value of the input field changes. The function uses document.getElementById to get the value from the input field, and then window.history.replaceState to update the URL with the new value from the input field.

This can work:
<body>
<p>Typing something...</p>
<input type="text" id="Input1" onkeyup="displayResult()"><!--onkeypress can not function backspace-->
<br>
<button id="Hite">
Hite
</button>
<script>
function displayResult()
{
var text = "www.google.com";
var Input1Value = document.getElementById("Input1").value;
document.getElementById("Hite").innerHTML = text +"\\"+ Input1Value + "\\";
}
</script>
I using onkeyup event so when the value of the input changes, it will function to set the text. Also, the reason why I do not using onkeypress is: onkeypress can not function when you press backspace.
Then, if you want to get the address, you can use document.getElementById("Hite").innerHTML to get it (As you did not required to get it)

Related

i try to make a form in NodeJs for searching a user in mongodb by telephone number using query routing, i don't know why this not working?

What is the wrong with this code? I got the exactly mobile number on the console but not on query routing on /search_user?mob ?
<input type="tel" name="message" id="mobile_input" value="">
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
e => {
e.preventDefault();
var mobInput = document.querySelector('#mobile_input');//get the input tag.
var moby = mobInput.value;//get mobile no.
console.log(moby);//be sure from the variable mob
mobInput.value='';//reset the input tag.
return moby;
}
</script>
<!-- query routing on /search_user?mob -->
Search
I tried something like this and this seems to work.
<form>
<input type="tel" name="message" id="mobile_input">
<button type="submit" onclick="handleSearch(document.getElementById('mobile_input').value)">Search</button>
</form>
<!--getting mobile no. from the input tag -->
<script type="text/javascript" defer>
// const handleChange = (value) => {
// var mobInput = value
// console.log(mobInput)
//
// }
const handleSearch = (input) => {
var searchValue = input;
console.log("This is the search value " + searchValue)
var url = '/search_user?mob=' + searchValue;
console.log(url)
window.location.href = url;
}
</script>
Explanation: I changed the a href element for a button element. Every time the button is clicked (onclick) the function handleSearch is called. This function takes as input the value of the input element with ID "mobile_input". Of course, you can clean up the function a bit more. After merging the url basis ('/search_user?mob=') with the input value (searchValue), the handleSearch function should redirect to the url (calling window.location.href). This last one you can of course change for the correct call to the server. Hope this helps.
Side note: you will see that there is a commented-out handleChange function. You could call this function in the input element to keep track of your changes in the console. this function is called using onChange, just like you use onClick with the search button.
For more info:https://www.w3schools.com/jsref/event_onchange.asp

How do I wait for input to be filled in an html page and then print it's value to the console in javascript?

I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)
This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>
Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".

delete function on multiple inputs

I have a js funciont that erase the last digit on an input, it work fine, but the problem is that i have another input and doesn't work. It just erase te digit on the first input.
<script>
function deleteTag(){
var strng=document.getElementById('entrada_1').value;
document.getElementById('entrada_1').value=strng.substring(0,strng.length-1);
}
</script>
<form method="POST" action="dashboard.php">
<label>RUT</label>
<input id="entrada_1" placeholder="12345678-9" type="text" name="rut">
<label>pass</label>
<input id="entrada_2" placeholder="pass" type="password" name="pass">
</form>
it works fine when is used on the input "entrata_1" but on "entrada_2" doesn't work, how can i make it work where the focus is?
You should instead just use a button without wrapping it in an anchor tag, give an onclick attribute like such onclick="deleteTag();". Give both the input fields a class name like class='entrada'.
Then in the function:
function deleteTag(){
var allInputs = document.querySelectorAll('.entrada');
allInputs.forEach((input) => input.value = input.value.substring(0, input.value.length - 1));
}

Restore textfield's default value when user clicks the reset button JavaScript

I'm trying to get the textfields to return to their default value when the user clicks the Reset button.
All it does now when the user clicks the Reset button is replacing the user's text with ''.
How can I do it by using pure JavaScript (no jQuery)?
HTML:
<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>
JAVASCRIPT:
app.onactivated = function (args) {
var aButton = document.getElementById("aButton");
aButton.addEventListener("click", buttonClickHandler, false);
var rButton = document.getElementById("rButton");
rButton.addEventListener("click", buttonResetHandler, false);
};
...
function buttonResetHandler(evetInfo) {
document.getElementById("first").innerText = '';
document.getElementById("second").innerText = '';
}
innerText is an invalid property that is implemented in IE browsers and is used for setting/getting text content of non-form elements, if the values should be set as default, you can use defaultValue property:
var a = document.getElementById("first"),
b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;
If you want to reset all the form elements, you can use .reset() method of DOM HTMLFormElement object:
document.forms["myForm"].reset();
location.reload(); // reloads the page
history.go(0); // deletes the history
But if you need to preserve some values inside of the page then reassign the values in the function again. To reassign, write the variable (declare in let to change later) again in the function and change the textContent again.
Replace,
document.getElementById("first").innerText
With,
document.getElementById("first").value
Example:
<input id="txtBox" type="text" value="lama">
<input type="button" value="reset lama" onclick='document.getElementById("txtBox").value="lama2";'>
create an init function that sets the default values for each input, then you can call that:
function initializeInputs() {
document.getElementById("first").value = '';
document.getElementById("second").value= '';
}
function buttonResetHandler(e) {
initializeInputs();
}

Change text of a textbox when other textbox text is changed

I have two input type = text. The text of the textbox is populated from a custom date picker module. I want to change the content of second text box when the text of first text box is changed.
<input type = "text" id = "one">
<br>
<input type = "text" id = "two">
<br>
<button onclick="myFunction()">Click me</button>
Javascript
function myFunction()
{
document.getElementById('two').value = 'hello';
}
Here I have just simulated the change of textbox 'two' on button click but actually it is changed by some other methods.
I want to change the text of textbox 'one' when value of textbox 'two' is changed.
Events like onchange and keyup wont work as the text is explicitly changed.
Checking the value of both text boxes for equality at interval of 1 sec is also not an option for me.
Plain Javascript or jQuery is fine.
Here is an example using jQuery:
Live view:
http://jsbin.com/aqiyaz/1/
Code:
http://jsbin.com/aqiyaz/1/edit
My solution is built on two javascript functions as follows:
function myFunction()
{
ob = document.getElementById('two')
ob.value = 'hello';
ob.focus();
ob.blur();
}
function sync(){
document.getElementById('one').value = document.getElementById('two').value
}
here is the HTML:
<input type = "text" id = "one">
<br>
<input type = "text" id = "two" onblur="sync()">
<br>
<button onclick="myFunction()">Click me</button>​
The following is a demo: http://jsfiddle.net/saidbakr/hD6Sx/

Categories