Transfer selected text from input textbox to textarea box? - javascript

I have no idea how to transfer text from each input textbox to text area line by line in JavaScript. Please help me! I'm beginner to programming and this is my first question :)

I won't give you the full answer, but this is pretty close, as the first input field is completely working. Now, it's up to you redefine this functions to let you handle an ARRAY of input fields accordingly.
var text1 = document.getElementsByTagName("input")[0];
var area = document.getElementsByTagName("textarea")[0];
function customFn(e) {
e.preventDefault();
area.innerHTML = text1.value;
text1.value = ""
}
document.getElementById("btn").addEventListener("click", customFn);
input {
display: block;
}
textarea {
display: block;
}
<div>
<input />
<input />
<input />
<input />
<button id="btn">transfer text</button>
<textarea rows="4" cols="50">
</textarea>
</div>

Related

Use textarea input in JavaScript

I'm trying to create a script that uses the input.
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
function hintbutton4() {
document.getElementById("textareabox").innerHTML = 'ID=textareabox';
}
I've got this, but I don't know how to grab the text as input...
How can I do it? What should I search for?
I want the input from the text area used in the script in the last part 'ID=textareabox'. That's all.
Here is a basic example using pure JavaScript.
Essentially, from what I understand, you are trying to populate a textarea with JavaScript as well as get the value.
Code Pen: http://codepen.io/anon/pen/mWyOMq
JavaScript
function getText() {
var text = document.getElementById("textareabox").value;
alert(text);
}
function setText() {
var text = document.getElementById("textareabox").value = 'Hello, World!';
}
HTML
<div>
<textarea id="textareabox" name="textarea1" placeholder="Start here..."></textarea>
<input type="button" value="Get Text" onclick="getText()" />
<input type="button" value="Set Text" onclick="setText()" />
</div>

Changing innerHTML based on input value

This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.

textarea should get copy to another textarea and original textarea should be cleared on a button click using javascript [duplicate]

This question already has answers here:
text from one textarea should get copy to another textarea and original textarea should be cleared on a button click using javascript
(3 answers)
Closed 7 years ago.
I have the following code.
It displays two textareas where the text from one textarea gets copied to another textarea on a button click using JavaScript
<head>
<script type="text/javascript">
function displayOut(){
var input=document.getElementById("txt").value;
var text2=document.getElementById("txt1");
text2.value=input;
if(input.length===0)
{
alert("Please enter a valid input");
return;
}
function eraseText() {
document.getElementById("txt").value = "";
}
}
</script>
</head>
<body>
<h1 id="result">Javascript Exm</h1>
<textarea id="txt1" rows="10" cols="100" readonly="readonly" ></textarea>
<textarea id="txt" rows="4" cols="50" onclick="eraseText()"></textarea><input type="button" onclick="displayOut()" value="click">
</body>
I want to accomplish the following:
1)On button click the text should get copied to another textarea and the text from origial textarea ie. first textarea should get clear to accept other text, so i have an erase function but it doesn't work.
2) I want to display the text should get copied in second textarea in a continuous format one below the other on a button click.
Try this. You seemed to have declared EraseText as a function but not actually called it. Adding the "\n" gives the line breaks in text2.
function displayOut(){
var input=document.getElementById("txt").value;
if(input.length===0)
{
alert("Please enter a valid input");
return;
}
var text2=document.getElementById("txt1");
text2.value += input+"\n";
eraseText();
}
function eraseText() {
document.getElementById("txt").value = "";
}
<textarea id="txt1" rows="10" cols="100" readonly="readonly" ></textarea>
<textarea id="txt" rows="4" cols="50" onclick="eraseText()"></textarea><input type="button" onclick="displayOut()" value="click">
1)on a button click the text should get copied to another textarea and the text from origial textare ie. first textarea should get clear to accept the another text, so i hv use erase function bt it doesn't work and second is that
2) and i want to display that the text should gets copied in second textarea in a continuous format one below the other on a button click.
try the below code
<textarea id="txt1" rows="10" cols="10" readonly="readonly" ></textarea>
<textarea id="txt" rows="4" cols="10" onclick="eraseText()"></textarea> <input type="button" onclick="displayOut()" value="click">
<script >
function displayOut(){
var input=document.getElementById("txt").value;
var text2=document.getElementById("txt1");
if(input.length===0)
{
alert("Please enter a valid input");
return;
}
else
text2.value+=input+'\n';
eraseText();
}
function eraseText()
document.getElementById("txt").value = "";
}
</script>
fiddle -->http://jsfiddle.net/santoshj/m740vwet/1/

make placeholder text reappear when no text is in the input field

I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}

How to add Variable text to a textarea along with user entered text.

So I have some code that works except for one aspect. It currently will allow alternate text to be added to a textarea and then entering new text with it, but it clears everything in the textarea first. You are unable to start notes and then select checkboxes. You have to select the checkboxes first. I would like to be able to do ether. Here is the function:
function updatebox2()
{
var textbox = document.getElementById("anotes");
textbox.value = "";
if (document.getElementById('cb5').checked) {
textbox.value = textbox.value + "\r\nAssisted with order, Order#: ";
}
if (document.getElementById('cb6').checked) {
textbox.value = textbox.value + "\r\nGave information on ";
}
}
Here is the HTML code:
<input id="cb5" type="checkbox" value="sale" onclick="updatebox2()" />Purchase<br />
<input id="cb6" type="checkbox" value="info2" onclick="updatebox2()" />Info<br />
<input id="cb7" type="checkbox" value="callback" onclick="updatebox2()" />Will Call Back<br />
<input id="cb8" type="checkbox" value="trans" onclick="updatebox2()" />Transfer<br />
<div class="Notes" style="text-align: left; inline-block; white-space: nowrap">
<span> Actions Taken</span>
(Copy)<br/>
<textarea id="anotes" rows="6" cols="50"></textarea>
</div>
You're clearing the text with textbox.value = "" every time an input is clicked and the function is called. Remove this line to stop clearing it.
If you want the user to be able to clear the text, just add a button that calls a function when clicked to clear the text.
Remove line textbox.value = "";
So you want to add the text to the textarea only after the any of the checkboxes have been ticked? Is that so then:
Demo: http://jsfiddle.net/hGGsW/

Categories

Resources