Inserting input field text into textbox using JavaScript
I need to insert text / line from an input field into a text area that already has text inside. The inserted row must be at the cursor position and a button is required to insert.
Is there a way to accomplish this using JavaScript?
thanks in advance
PS the text / string to be inserted is retrieved from the database using PHP
a source to share
Kamia's sample code is on the right track. Here's the complete implementation for your test. Based on your description, I am guessing that in your real code, you will probably have some type of search using php that will extract text to add to the textbox. If so, then it would require some type of Ajax call to the server. I would recommend using jQuery Ajax functions .
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
window.onload = function(){
btn = document.getElementById("btnInsertText");
myText = document.getElementById("myTextArea");
text = document.getElementById("textToInsert");
btn.onclick = function(){
insertAtCursor(myText, text.value);
}
}
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//Mozilla/Firefox/Netscape 7+ support
else if (myField.selectionStart || myField.selectionStart == '0'){
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
</script>
</head>
<body>
Text To Insert:<input type="text" id="textToInsert" />
<input type="button" id="btnInsertText" value="Insert Text" /><br/>
<textarea id="myTextArea" rows="6" cols="50">
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC,
making it over 2000 years old.
</textarea>
</body>
</html>
a source to share
Dede,
from some basic googling: D ->
<script type="text/javascript">
<!--
//myField accepts an object reference, myValue accepts the text strint to add
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
//in effect we are creating a text range with zero
//length at the cursor location and replacing it
//with myValue
sel = document.selection.createRange();
sel.text = myValue;
}
//Mozilla/Firefox/Netscape 7+ support
else if (myField.selectionStart ¦¦ myField.selectionStart == '0') {
//Here we get the start and end points of the
//selection. Then we create substrings up to the
//start of the selection and from the end point
//of the selection to the end of the field value.
//Then we concatenate the first substring, myValue,
//and the second substring to get the new value.
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValue+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
//-->
</script>
Use the button to add text:
<textarea id="mytext" rows="8" cols="70"></textarea>
<button onclick="insertAtCursor(document.getElementById('mytext'),'Test text')" valueAdd Test text>
Hope this helps ya
C ya
a source to share