How do I find all input fields inside a form and copy their values into textarea using Javascript?
Question
I want to add a couple of input fields ( name , age , location , status , etc...) to my form.
When I click submit button, how do I get all the values inside a form and place them into a single textarea element, so that it's easy to copy? Thanks for the help!
My current code:
<form>
<input type="text" id="txt">
<button type="button" onclick="ShowText();">Submit</button>
</form>
<span id="show"></span>
<script>
function ShowText(){
var txt = document.getElementById('txt');
var show = document.getElementById('show');
show.innerHTML = txt.value;
}
</script>
2 answers
solution1
2 ACCPTED 2015-02-28 14:01:34
Don't use id attributes of input fields in that particular case.
Add an id attribute to the form
function ShowText(){ // find each input field inside the 'myForm' form: var inputs = myForm.getElementsByTagName('input'); // declare 'box' variable (textarea element): var box = document.getElementById('show'); // clear the 'box': box.value = ''; // loop through the input elements: for(var i=0; i<inputs.length; i++){ // append 'name' and 'value' to the 'box': box.value += inputs[i].name + ': '+inputs[i].value+'\\n'; } }
<form id="myForm"> <input type="text" name="name" placeholder="Name"/><br/> <input type="text" name="age" placeholder="Age"/><br/> <input type="text" name="location" placeholder="Location"/><br/> <input type="text" name="status" placeholder="Status"/><br/> <button type="button" onclick="ShowText();">Submit</button> </form> <p>Show:</p> <p><textarea cols=30 rows=5 id="show"></textarea></p>
solution2
0 2015-02-28 13:25:56
You can display the text data in a paragraph and then can select it easily as:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<form>
<input type="text" name="in01" id="txt1">
<input type="text" name="in02" id="txt2">
<button type="button" onclick="ShowText();">Submit</button>
</form>
<span id="show"></span>
<script>
function ShowText(){
var txt = document.getElementById('txt1').value;
var show = document.getElementById('txt1').value;
//window.alert(txt);
document.getElementById("demo").innerHTML = txt +" "+show;
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I add values to input fields using JavaScript?
how do i find and convert link tags to @import tags inside a textarea using jquery and/or javascript?
Creating input fields inside a form using JavaScript
How do I pass form values to other fields in a form with javascript
How do I dynamically sum input values inside a repeatable fields?
How do I prevent users from changing form values or removing input fields elements using inspector tool?
How do I modify my code to collect form input from a popup and insert it into a textarea at cursor location on original page using JavaScript?
How do I use javascript to update the values of hidden input fields
How do I find the sum of numbers from multiple form input values in JavaScript?
How do I get all the value of Input fields (including select, text-area) from multiple fieldsets inside a single form element?
Related Tags