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/
Related
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)
I made a button but when I press the button I want to change the button to just a text output. I don't want to change the text inside the button. I want to change the button itself into a text.
<input type="button" id="button1" value="See Answer" onclick="check1();">
this is my button.
<script type="text/javascript">
function check1() {
const answer = document.getElementById("question1").innerText;
const mybutton = document.getElementById("button1");
if(answer=="Seoul") mybutton.innerText = "CORRECT"
else mybutton.innerText = "Seoul"
}
</script>
this is my unfinished version of changing the button into the text "CORRECT" if the answer is correct and changing the button into text "Seoul" if the answer is wrong.
HTML <input> element does not have innerText property, use value instead. You also should remove the button and create a text node with the value using createTextNode(). Finally insert the created text element after the input element:
function check1() {
const answer = document.getElementById("question1");
const mybutton = document.getElementById("button1");
mybutton.remove();
var textNode;
if(answer.value.trim() == "Seoul"){
textNode = document.createTextNode("CORRECT");
}
else textNode = document.createTextNode("Seoul");
//insert the text node after the answer element
answer.parentNode.insertBefore(textNode, answer.nextSibling);
}
<input id="question1"/>
<input type="button" id="button1" value="See Answer" onclick="check1();">
Input type button and text does not have innerText, use value instead:
function check1() {
const answer = document.getElementById("question1").innerText;
const mybutton = document.getElementById("button1");
if(answer=="Seoul") {
mybutton.parentNode.removeChild(mybutton);
var t = document.createTextNode("Correct");
document.body.appendChild(t);}
else {
mybutton.parentNode.removeChild(mybutton);
var t = document.createTextNode("Seoul");
document.body.appendChild(t);
}
}
<input type="button" id="button1" value="See Answer" onclick="check1();">
<input id="question1">
You can make one element with same text with buttons text, and firstly to hide this element. When you click on button show element and hide the button.
You can change the button field to text field by fetching the element by id and setattribute of type to text
document.getElementById("button1").setAttribute("type","text");
To disable the converted text field, you can do it this way.
document.getElementById("button1"). disabled = true;
The complete code:
<script type="text/javascript">
function check1() {
//Fetch elements and answers
const answer = document.getElementById("question1").innerText;
const mybutton = document.getElementById("button1");
//Change button to text field with changing its type attriube to text
mybutton.setAttribute("type","text");
//Disable the newly created text field
mybutton.disabled = true;
if(answer === "Seoul"){
mybutton.value = "CORRECT";
}else{
mybutton.value = "Seoul";
}
}
</script>
Lastly, use Triple equals (===) instead of Double equals (==) whenever doing comparison. Double equals (==) converts the variable values to the same type before performing comparison. While triple equals (===) does not do any type conversion (coercion) and returns true only if both values and types are identical
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".
I am trying to have the input text that was entered via a text field form change on button click using JavaScript. I'm having difficulty figuring out why it is not working. Any help would be appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script type="text/javascript">
function start(){
var button = document.getElementById("button");
button.addEventListener("click", buttonPressed, false);
}
function buttonPressed(){
var text = document.getElementById("textField").value;
text.value = "GMU";
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<form>
<input id="textField" type="text" value="">
<input id="button" type="button" value="Button">
</form>
</body>
</html>
The problem lies here:
var text = document.getElementById("textField").value;
text.value = "GMU";
Take a look at the lines above. You are getting the value of an element and storing it into text but you then try to assign text.value? Consider this situation:
Say that the input currently has a value of "Apples". Doing:
var text = document.getElementById("textField").value;
Will store "Apples" in text. Now you do:
text.value = "GMU";
Since text is a string, and you try to access property value which does not exist for strings, it doesn't work - you've access the value property one too many times.
Now - note that the variable stores the value not reference to the element's value, meaning that in your code above, text only holds the property value, it's not pointing to the actual element's value property. Thus you would need to directly modify the value property like so:
document.getElementById("textField").value = "GMU";
This works because you modify the property of the element itself, you don't copy it into a variable.
You can alternatively store the element into a variable, and do element.value = "val" because an element is an object, and objects have references that point to memory, so when you assign to an object, reference is assigned and it points to the same place in memory.
To change the input text on button click you can use addEventListener just on the button. Then you can change the input field after that.
var button = document.getElementById("button");
var text = document.getElementById("textField");
button.addEventListener('click', function() {
text.value = "GMU";
});
<form>
<input id="textField" type="text" value="">
<input id="button" type="button" value="Button">
</form>
I have made an input box and i have cloned this input box to a div,let's name them ipbox1 and ipbox2, ipbox2 is the copy of ipbox1 now what i want to do is that when
i enter/change the value in either of them, the dom.value or $("#id").val() should return the updated the value. But now it's only functioning with the ipbox2.
What should i do?
fiddle
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" id = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>
I have update you fiddle: https://jsfiddle.net/gschambial/s6td1bof/7/
var initVal = $('#abc').val();
$("#ghj").click(function(){
$("#abc").val("Some text");
$("#abc").clone(true).appendTo("#pastehere");
})
$("#abc").on('change',function(){
alert();
initVal = $(this).val();
})
$("#get").click(function(){
alert(initVal);
})
You should not append a cloned element with an id as this creates invalid markup (two html elements with the same id).
If you want to be able to read the value of either of them independently, then check out this fiddle
If not, then I must be offtrack. Please add more details about what you need to achieve :)
HTML
<input type = "text" class = "abc">This is the first box
<div id = "pastehere">
</div>This is the cloned box
<br><button type = "button" id = "ghj">
Clone
</button>
JS
var initialInput = $(".abc");
$("#ghj").click(function(){
initialInput.val("Some text");
initialInput.clone(true).appendTo("#pastehere");
})
$(".abc").on('change',function(ev){
var targetInput = $(ev.target);
alert('myValueIs:' + targetInput.val())
});