I have a text area field and I want to get value of that text area so I try to get via javascript like:
var body = "Descripción";
var _body = $("div[title='" + body + "']");
Text area
<textarea rows="10" cols="20" id="Descripci_x00f3_n_9b68a148-3221-43c6-abf3-bb32afd3e51b_$TextField" title="Descripción Campo obligatorio" class="ms-long"></textarea>
But I just get object not value.
For some reason when I write in text area this input change with the value I want:
<input id="ClientFormPostBackValue_742e5004-4272-4f68-b3b9-a3c9e3d9ba9b_Descripci_x00f3_n" name="ClientFormPostBackValue_742e5004-4272-4f68-b3b9-a3c9e3d9ba9b_Descripci_x00f3_n" type="hidden" value="this is the value I want">
How can I retrieve value from this input? Regards
var body = "Descripción";
//use `^=` to denote that the attribute should start with a string
var _body = $("textarea[title^='" + body + "']");
console.log(_body.val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="10" cols="20" id="Descripci_x00f3_n_9b68a148-3221-43c6-abf3-bb32afd3e51b_$TextField" title="Descripción Campo obligatorio" class="ms-long">
Stuff
</textarea>
You want to get the data after a button click? if so.
function run() {
var textbox = document.getElementById("Descripci_x00f3_n_9b68a148-3221-43c6-abf3-bb32afd3e51b_$TextField").value;
document.write(textbox);
}
</script>
<textarea rows="10" cols="20" id="Descripci_x00f3_n_9b68a148-3221-43c6-abf3-bb32afd3e51b_$TextField" title="Descripción Campo obligatorio" class="ms-long"></textarea>
<br/>
<button type="button" onclick="run()">get</button>
Related
So I'm inspecting a website field where I can enter text. On most text boxes/fields, when you enter text, it will be saved as 'innerText' or as a value 'text', but this field doesn't save the string like that anywhere in html. This means I can't edit the text that is in that field.
Where would this string be stored, and how could I edit it using javascript?
<div id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false">sdslll </div>
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
As you can see, "mirror" holds the text I want to edit. But when I edit that, it doesn't take effect
<html>
<body>
<input id='in' type='text' />
<h3 id='out'></h3>
<script>
let input = document.getElementById('in');
let output = document.getElementById('out');
document.onkeyup = function () {
output.innerHTML = input.value;
};
</script>
</body>
</html>
<script>
window.onload = function () { setValue(); }
function setValue(){
document.getElementById("mirror").value = "Some value here";
}
</script>
<input id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false" value="sdslll ">
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
I would like to take the text from two text areas and insert them concatenated into a following paragraph. I've made a calculator and odd/even validator, and had been able to draw the user input values just fine. Is there something different with text?
<p>
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button type="button" onclick="tafunc()">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
<script>
function tafunc() {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = doucment.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
</script>
document is misspelled in second assignment. and using value attribute for textarea is correct!
HTML:
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button id="btn1" type="button">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
change your inline javascript to this:
var btn = document.getElementById("btn1");
btn.onclick = function () {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = document.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
and here's a working jsFiddle
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/
For example, if I have the following text inside textarea:
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
Then I want to use innerHTML and javascript to parse this textarea and print it on the same page.
Reason, while printing on the page, I would like to prefix by adding some static text to each line, let's say output should look like:
Read How to
Read print each
Read line from
Read textarea using
Read innerHTML and
Read javascript
Thanks in advance.
All of my html page content is below. I want to learn how to print what's in textarea on the same page.
<html>
<body>
Print the contents of textarea as is inside html page
<br/>
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
</body>
</html>
You can use the value property to get the text out of the texarea. Then replace each newline with the desired text.
function printonpage() {
var text = document.getElementById('targetTextArea');
var val = text.value;
var arr = val.split("\n");
arr = arr.slice(0, arr.length -1);
var newText = "Read " + arr.join("<br>Read ");
var output = document.getElementById('output');
output.innerHTML = newText;
}
Print the contents of textarea as is inside html page
<br/>
<textarea rows="6" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
<div id="output"></div>
You can use following code to do the same. This code using innerHTML and javascript
var textareastext = "<pre>"+ document.getElementById('targetTextArea').value+"</pre>";
document.getElementById('innerhtml').innerHTML = textareastext;
document.getElementById('targetTextArea').style.display = 'none';
window.print();
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<div id="innerhtml"></div>
Check out this fiddle. (I have used jQuery)
Get the innerHTML by the mehod .html().
split it with regex /\n/ (newLine).
Concatenate the substrings with additional "Read".
Alert the final result.
Here is the snippet.
$('#click').click(function() {
var text = $('#targetTextArea').html();
var lines = text.split(/\n/);
var finalText = '';
for (i in lines) {
finalText = finalText + 'Read ' + lines[i] + '\n';
}
alert(finalText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea rows="20" cols="50" id="targetTextArea">How to
print each
line from
textarea using
innerHTML and
javascript</textarea>
<input type="button" value="Click Me" id="click" />
Very simply, I want to write some code that shows a list of buttons. When one is clicked, a chunk of predefined text is inserted into whichever text field the cursor is in at that moment. I can get the text to insert, but only in one text field.
I need this text to be expandable, as it will be used on several pages with different numbers of text field.
The code I have so far is below. I know I need to somehow insert the variable inFocus from the second JavaScript function into the first parameter of the onClick="insertText() function (currently just called txt1).
Am I barking up the wrong tree or is this the correct way to go?
I’ve tried playing with the JavaScript in the main code and come up with this, to no avail. Any ideas?
<script type="text/javascript">
function insertText(text)
{
var elemID = false;
$('input, textarea').focus(function() {
elemID = $(this).attr('id');
});
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
<script>
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
</script>
</head>
<body>
<form>
<textarea cols="50" rows="10" id="txt1"></textarea><p>
<textarea cols="50" rows="10" id="txt2"></textarea></p>
<textarea cols="50" rows="10" id="txt3"></textarea>
<?php do { ?>
<input type="button" value="<?php echo $row_tooltips['word']; ?>" onclick="insertText('txt1', '<?php echo $row_tooltips['link']; ?>');">
<?php } while ($row_tooltips = mysql_fetch_assoc($tooltips)); ?>
</form>
</body>
</html>
<html>
<head>
<script src='jquery.js'></script>
<script>
$(document).ready(function(){
$('.buttonClick').click(function(){
});
$( ".textFocus" ).focusout(function() {
$('#' + this.id).val('This text is append when mouse out from textfield.');
});
});
</script>
</head>
<body>
<button id='b1' class='buttonClick'>button1</button>
<button id='b2' class='buttonClick'>button2</button>
<button id='b3' class='buttonClick'>button3</button>
<button id='b4' class='buttonClick'>button4</button>
<button id='b5' class='buttonClick'>button5</button><br />
Textbox1: <textarea cols="50" rows="10" id="txt1" class='textFocus'></textarea><br />
Textbox2: <textarea cols="50" rows="10" id="txt2" class='textFocus'></textarea><br />
Textbox3: <textarea cols="50" rows="10" id="txt3" class='textFocus'></textarea>
</body>
</html>
I think ,this should help you.Or You need to give more details to me.And to insert data from database,you need to use id of field and call function using ajax and insert that value to textfield.
You have jQuery, so you should rid of onclick="" on your button and use the jQuery way.
Example:
$('input[type=button]').click(function(){
$('#txt1').val('the text you want to insert....');
});
You can compose the jQuery selector from a "#" and your id:
$('#mybutt').click(function() {
$('#' + inFocus).val('the text you want to insert....');
});
This inserts the text into the element with the id that is inFocus.
It will throw an error if no textarea is selected, e.g. inFocus is false.
Inline javascript event attributes are IMO bad practice especially when jQuery is loaded. jQuery makes attaching events to DOM object a breeze.
Using button instead of input type="button" is usually a better idea as your display and value are separate.
See the code comments for more information.
Fiddle:
http://jsfiddle.net/54mES/
HTML
<textarea cols="50" rows="5" id="txt1"></textarea>
<textarea cols="50" rows="5" id="txt2"></textarea>
<textarea cols="50" rows="5" id="txt3"></textarea>
<br>
<button type="button" value=" word1 " class="insert-word">word1</button>
<button type="button" value=" word2 " class="insert-word">word2</button>
JavaScript
var input_position = 0, last_input = false;
// if the input[type="text"] or textarea has a keyup or mouseup event then run this
$('input[type="text"], textarea').on('keyup mouseup', function () {
last_input = $(this);
// gets the last input's position
if('selectionStart' in this) {
input_position = this.selectionStart;
} else if('selection' in document) {
this.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -this.value.length);
input_position = Sel.text.length - SelLength;
}
});
$('button.insert-word').click(function () {
if(!last_input) return; // if an input wasn't selected don't run
var last_input_value = last_input.val(); // value of input
var word_to_insert = this.value; // value of button
// split the last input's value then insert the word
last_input.val([
last_input_value.slice(0, input_position),
word_to_insert,
last_input_value.slice(input_position)
].join(''));
});