How can one keep a user's input in an input box?
This is what I have so far:
<input type="text" ng-model="userText" placeholder="Enter text here">
But I want it so that when the user is done typing, it keeps the text there. How would I do this?
You can use sessionStorage or localStorage:
var inp = document.querySelector('input');
inp.value = sessionStorage.getItem('input-value') || '';
inp.addEventListener('input', function() {
sessionStorage.setItem('input-value', inp.value)
});
Demo
Related
Using jquery to get the value of a textbox.
BUT
i need to enter the id of the textbox, then use that value to get the value of the textbox using jquery.
var tt = $("#fieldname").val()
that works
now how do i enter the fieldname at runtime, and get jquery to execute the val command as if it was hard coded?
There are a few ways that you could do this. One way is to listen to one of the keyboard or change events on the textbox you enter the id into, to help determine when the input has changed. So for example
$("#inputText").on("keyup", function(keyupEvent){
var textboxId = $("#inputText").val();
var textboxIdValue = $("#" + textboxId).val();
});
Or another way could be to use a click event with similar kind of logic, so for example
$("#clickMe").on("click", function(){
var textboxId = $("#inputText").val();
var textboxIdValue = $("#" + textboxId).val();
})
An example for the use case of both can be seen here https://fiddle.jshell.net/xpvt214o/114584/
Here is an example for you to get started with:
<body>
<p>Type "one" or "two" below</p>
<input id="search" />
<input id="one" value="This input is #one" />
<input id="two" value="And this is #two" />
<p id="result">No input specified</p>
</body>
And the corresponding jQuery code:
// Cache jQuery elements for performance and readability
var $search = $("#search");
var $result = $("#result");
$search.on("change", function() {
var search_value = $search.val();
if (search_value.length) {
search_value = "#" + search_value.toLowerCase().trim(); // Sanitise user input
if ($(search_value).length) {
$result.text($(search_value).val());
} else {
$result.text("Input not found");
}
} else {
$result.text("No input specified");
}
});
This will show the value of the specified input, if it exists.
You can see it in action here: https://jsfiddle.net/jeevantakhar/xpvt214o/114558/
I'm trying to display the value of a text field onclick of the Search button.
On the search button, I'm using
onclick="document.getElementByid('output').innerHTML = this.value"
This gets the value of the Search button, which is just 'Search' and displays it in a 'output' div below.
Is there a way to use this to get the value of a separate text field once it is filled in by the user?
I've tried changing this.value to field1.value where field1 is the id/name of the text field, but this does not work.
Any help?
use
document.getElementByid('output').innerHTML = document.getElementById('field1').value
Try this (example):
var btn = document.getElementById('search');
var input = document.getElementById('field1');
var output = document.getElementById('output');
btn.addEventListener('click', function(e) {
output.innerHTML = input.value;
});
I am doing some basic javascript where i am choosing some value from the popup and that value is appearing in the textfield. Now there is a button on the side of the textfieldfield, which when clicked will transfer its value to the another textfield as comma separated.
I mean the new textfield will have values as comma separated and not replaced.
I am doing a code like this
<input type="text" class="inputs" style="width:70px;" name="color1" id="color1" value="" maxlength="7" size="7">
<img src="icon_add.gif" alt="Add to text Box above" title="Add to text Box above" border="0">
function addtoTextField(cFieldName) {
var objTxt = document.getElementById('sta');
objTxt.appendChild(cFieldName);
}
Another text field where i need to pass value
<input type="text" name="sta" id="sta" class="inputs" />
Textbox element can't have child nodes, it only got a value. So to append value of other textbox as comma delimeted string, have this:
function addtoTextField(cFieldName) {
var oField = document.getElementById(cFieldName);
var valueToAdd = oField.value;
if (valueToAdd.length === 0)
return; //don't add empty values
var objTxt = document.getElementById('sta');
var existingValues = (objTxt.value.length === 0) ? [] : objTxt.value.split(",");
existingValues.push(valueToAdd);
objTxt.value = existingValues.join(",");
oField.value = ""; //clear textbox
oField.focus(); //bring focus back
}
Live test case.
The above will also clear the sender textbox value and re-focus it for next input.
Im having trouble creating multiple input texts with javascript.
My point is create a new input text everytime the input before is completed. (parent?)
Ive some code for comboboxs, but this time I need just input text box.
How can I do that ?
I've found this code:
<script type="text/javascript">
function addInput()
{
var x = document.getElementById("inputs");
x.innerHTML += "<input type=\"text\" />";
}
</script>
<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>
But for my problem button is obsolete.
I think my event trigger will be something arround this "when user click in an input text box and it is != blank it creates a new one".
I migth need some ID to identify every input text box.
Cheers.
JSBIn Demo
Guess this helps:
<div id="myDiv">
<input type="text" id="txt_1" onkeydown="newTextBox(this)" />
</div>
<script type="text/javascript">
function newTextBox(element){
if(!element.value){
element.parentNode.removeChild( element.nextElementSibling);
return;
}
else if(element.nextElementSibling)
return;
var newTxt = element.cloneNode();
newTxt.id = 'txt_'+( parseInt( element.id.substring(element.id.indexOf('_')+1)) + 1);
newTxt.value='';
element.parentNode.appendChild(newTxt);
}
</script>
HTML code:
<div id="inputcontainer">
<input type="text" name="input0" id="input0" onkeyup="addInput();" />
</div>
And Javascript:
var currentindex = 0;
function addInput(){
var lastinput = document.getElementById('input'+currentindex);
if(lastinput.value != ''){
var container = document.getElementById('inputcontainer');
var newinput = document.createElement('input');
currentindex++;
newinput.type = "text";
newinput.name = 'input'+currentindex;
newinput.id = 'input'+currentindex;
newinput.onkeyup = addInput;
container.appendChild(newinput);
}
}
This will add a new input to the list only when the last input is not empty.
http://jsfiddle.net/HJbgS/
Have a look at the onchange event on your text input field. You can use it, like you use onmousedown on your button.
See http://www.w3schools.com/jsref/event_onchange.asp for an example.
In your addInput() function you should then check if the input of the previous textfield is != "".
I have four input boxes. If the user fills the first box and clicks a button then it should autofill the remaining input boxes with the value user input in the first box. Can it be done using javascript? Or I should say prefill the textboxes with the last data entered by the user?
On button click, call this function
function fillValuesInTextBoxes()
{
var text = document.getElementById("firsttextbox").value;
document.getElementById("secondtextbox").value = text;
document.getElementById("thirdtextbox").value = text;
document.getElementById("fourthtextbox").value = text;
}
Yes, it's possible. For example:
<form id="sampleForm">
<input type="text" id="fromInput" />
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="button"value="Fill" id="filler" >
<input type="button"value="Fill without jQuery" id="filler2" onClick="fillValuesNoJQuery()">
</form>
with the javascript
function fillValues() {
var value = $("#fromInput").val();
var fields= $(".autofiller");
fields.each(function (i) {
$(this).val(value);
});
}
$("#filler").click(fillValues);
assuming you have jQuery aviable.
You can see it working here: http://jsfiddle.net/ramsesoriginal/yYRkM/
Although I would like to note that you shouldn't include jQuery just for this functionality... if you already have it, it's great, but else just go with a:
fillValuesNoJQuery = function () {
var value = document.getElementById("fromInput").value;
var oForm = document.getElementById("sampleForm");
var i = 0;
while (el = oForm.elements[i++]) if (el.className == 'autofiller') el.value= value ;
}
You can see that in action too: http://jsfiddle.net/ramsesoriginal/yYRkM/
or if input:checkbox
document.getElementById("checkbox-identifier").checked=true; //or ="checked"