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;
});
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/
$(document).ready(function () {
var userSites = newArray();
var max_fields = 100; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 5; //initial text box count
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields) {
x++; //text box increment
$(wrapper).append('<div><input type="text" name ="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
I have this code, because I want to have a lot of user inputs. However, once the user inputs this stuff, how do I save this into an array? Is that possible? I want to save it into an array that I can access from a java applet, is that possible as well?
However, now that the user has input this stuff, how do I save this into an array? Is that possible? I want to save it into an array that I can access from a java applet?
When the form is submitted, the event handler, collectData gathers the text in each <input> and uses the push method to populate an array. This array is then stored in a hidden <input> and that data is then extracted by the form which then posts to the server.
I don't know much about Java applets but I got you this far. I suggest you ask about Java in a new question. Your tags are of a JavaScript/jQuery nature.
My demo actually functions with a test server so once submitted, the server will respond with the data that was posted to it.
This works: http://plnkr.co/edit/seD0L3oI7dTnXQrrFZPl?p=preview
Added Code
form.addEventListener('submit', collectData, false);
function collectData(e) {
var userSites = [];
var cache = document.getElementById('cache');
var z = 0;
while (z < max_fields) {
z++;
var data = inputs[z].val();
userSites.push(data);
}
e.stopPropagation();
cache.value = userSites;
}
});
Create an Array object in your one of you script tags :
<script type="text/javascript" >
var myArr=new Array();
</script>
Now add onchange to your inputs also update myArr :
$(wrapper).append('<div><input type="text" name ="myText'+x.toString()+'" onchange="myArr.push(this.value);document.getElementById('myArrInput').value=JSON.stringify(myArr);" /><a href="#" class="remove_field" onclick="myArr['+x.toString()+'].value=null;document.getElementById('myArrInput').value=JSON.stringify(myArr);" >Remove</a></div>');
Add this hiddenField to your page to send myArr to you applet as JSON string:
<input id="myArrInput" type="hidden" name="myArray" value="" />
In server you have to convert myArray Json string to object.
This is what my program's body looks like:
<form id = "input">
<input id = "0" >
</form>
<p onclick = "add()"> Add Another</p>
And on clicking the above The following function is executed:
var inputArea = document.getElementById("input");
next = 1;
function add(){
inputArea.innerHTML+= " <input id = " + next+ ">" ;
Where next is the id of new input field. In this case, since 0 already exists so value of next is 1.
One problem that I am encountering with this is that after adding a new input field, the values in all existing input fields are lost. How to save these values? My attempt is to place this code in function add():
for (i=0;i<next;i++)
{inputs[i] = document.getElementById(i);
inputV[i]= inputs[i].value;
inputs[i].value = inputV[i];}
But this does not works..
var inputArea = document.getElementById("input");
next = 1;
function add(){
inputArea.innerHTML+= " <input id = " + next+ ">" ;
var inputs = new Array();
var inputV = new Array();
for (i=0;i<next;i++)
{inputs[i] = document.getElementById(i);
inputV[i]= inputs[i].value;
inputs[i].value = inputV[i];}
next++;
}
<form id = "input">
<input id = "0" >
</form>
<p onclick = "add()"> Add Another</p>
You may want to dynamically add elements to your DOM tree like so
function add() {
var form = document.getElementById("input");
var input = document.createElement("input");
form.appendChild(input);
}
The problem with what you're doing is that when you write inside an input field, the changes are not represented in the HTML code, only in the memory of the browser. Thus if you add text through to code to form.innerHTML, the browser is going to reinterpret the text inside the form which will be
<input id="0"> <input id="1"> ...
and this will result in two empty input of type text being displayed.
Edit: you can then add your id tag via
function add() {
var form = document.getElementById("input");
var input = document.createElement("input");
input.id = someValue;
form.appendChild(input);
}
N.B. please indent your code in a somewhat logical manner.
The reason this is happening is that the dom, or more specifically inputArea's innerHtml doesnt get changed when you type into a form field. And what youre doing is resetting the innerHTML with a blank input BEFORE youre capturing the values.
so whats going on is you have HTML like this:
<input id='0' />
then type into the form so that it behaves like:
<input id='0' value='foo' />
but thats not what the innerHTML actual is. its still <input id='0' /> because the value is kept in memory not on the dom.
if you want to add new elements to the form, you need to use appendChild instead
so convert
inputArea.innerHTML+= " <input id = " + next+ ">"
to
inputArea.appendChild(document.createElement('input'))
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
The textbox is dynamically generated using javascript
var txtLoop = 1;
function add(type) {
if (txtLoop !=23){
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "txtLine" +txtLoop);
element.setAttribute("id", "txtLine" +txtLoop);
txtLoop++;
}
The question is, how can you post this multiple textbox based on how many textbox created?
how can you post this multiple textbox
As long as the textbox has a name attribute, you can access the value:
$_POST['txtLine1']
$_POST['txtLine2']
$_POST['txtLine3']
// ... etc
If you want an array instead, use:
element.setAttribute("name", "txtLine[]");
Then in your PHP code, this will return you an array of values:
$_POST['txtLine']
for ($x=1; $x<=22; $x++) {
if (isset($_POST['txtLine'.$x]) && $_POST['txtLine'.$x] != ''){
$txtLine[$x] = $_POST['txtLine'.$x];
}
}
Please let me know if it's not this simple but just wrap the inputs in a form and submit the form.