Using JavaScript so button inserts text into current text field - javascript

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(''));
});

Related

Javascript (not found) error on form submit [duplicate]

I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.
Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />
Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/
http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.
Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})

onkeyup javascript attribute set text in textbox

I have this TextArea
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
and this hidden text box
<input type="hidden" name="Textarea" id="txtArea" value="" required>
and this is my JavaScript
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
}
As you can see here I used alert just to make sure that the onkeyup is working by getting the value of textarea and as of now it successfully gets the value of textarea and showing to the alert.
But when I tried to set the value of textarea to hidden textbox the script of onkeyup doesn't work anymore
This is the jQuery I used when I'm trying to set a text to a textbox
$("#txtArea").val(txtAreaValue);
You can use this context and remove the invoke ().
<textarea class="textarea" onkeyup="deltxtArea" id="txtID1" placeholder="Remarks"></textarea>
And into your script file, just do:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
Or a better way, do your keyup event into the script file, and remove the inline attribute of your html:
function deltxtArea(id){
var txtAreaValue = $(this).val();
$("#txtArea").val(txtAreaValue);
}
$(function() {
$("#txtID1").keyup(deltxtArea)
})
function deltxtArea(){
var txtAreaValue = document.getElementById('txtID1').value;
document.getElementById('txtArea').value = txtAreaValue;
}
<textarea class="textarea" onkeyup="deltxtArea()" id="txtID1" placeholder="Remarks"></textarea>
<input type="hidden" name="Textarea" id="txtArea" value="" required>
All this looks fine but i think difficult to find the issue
I have tried as per your requirement all this looks fine , so kindly tried this code , you can avoid to include jquery if you already included
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea" onkeyup="deltxtArea(1)" id="txtID1" placeholder="Remarks"></textarea>
<input type="text" name="Textarea" id="txtArea" value="" required>
<script type="text/javascript">
function deltxtArea(id){
var txtAreaValue = $('#txtID1').val();
alert(txtAreaValue);
$("#txtArea").val(txtAreaValue);
}
</script>
</body>
</html>
if it works for you after that you can change input type from text to hidden

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/

javascript / jquery: Get the changed content of textarea

I'm new to javascript & jquery. i have a textarea with a preset content. If i change the value on the site by entering "new" and press the "showme" button the alert box does show me the preset value, not the new contend of the textarea.
Why is this? What i have to change to get the new content from my chrome browser?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form action="javascript:Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').html();
alert(s);
}
</script>
You need to use val method
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form onsubmit="Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').val();
alert(s);
}
</script>

document.write(); removes other HTML [duplicate]

This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Closed 9 years ago.
I'm doing a test for a comment thing. All I want is to have a little text box where you type stuff and a button that says "Add Comment" that will document.write(); what you put in the text box under the add comment thing. But I'm getting a problem where document.write(); seems to be removing all the other HTML that was written out side the javascript (i.e. the textarea and the "Add Comment" button). When I press the "Add Comment" button, what I wrote in the textarea fills up the whole screen and seems to be blotching out the rest. Here is my code:
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p>Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
document.writeln(input);
}
</script>
</body>
</html>
You can not use document.write once the document has completed loading. If you do that then browser will open a new document and it will replace it with the current. So it is the design behavior of document.write
It would be better to use innerHTML to put HTML inside element
Try like this:
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>
Also check Why is document.write considered a “bad practice”?
Well instead of using document write, you should append or fill into targeted element, I modified your code a little bit, It might help you.
<html>
<head>
<script language="JavaScript">
function add1(){
var tf = document.getElementById('tf');
add2(tf.value);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>
If you wanna append only from original document, you can use it as
test.innerHTML = test.innerHTML + input;
Furthermore
How to append data to div using javascript?
Don't use document.write().Instead use innerHTML
Note:Your code will not work as you are using tf.value where tf is object of textarea which don't have value attribute. So I recommend to use innerHTML.
<html>
<script language="JavaScript">
<head>
function add1(){
var tf = document.getElementById('tf');
add2(tf.innerHTML);
}
</script>
</head>
<body>
<p id="test">Type stuffz here:</p>
<textarea id="tf" wrap="logical" rows="10" cols="50"></textarea>
<!--<input type="textfiel" id="tf" value="Test">-->
<br>
<input type="button" onClick="add1()" value="Add Comment" >
<script type = "text/javascript">
function add2(input){
var test = document.getElementById('test');
test.innerHTML = input;
}
</script>
</body>
</html>
The other comments are correct: document.write() is not something you want to be using. You'll still see that method suggested in some of the older books on JavaScript, but it's really a terrible way to modify the document, for many reasons I won't get into here.
However, no one's suggesting what you can do instead, so I'll point you in the right direction.
If you want to modify elements in your HTML, your best bet is to use the innerHTML property of DOM objects. For example, let's say you have a <div id="output"> that you want to add text to. You would first get a reference to that DOM element thusly:
var outputDiv = document.getElementById( 'output' );
Then you can either completely change the contents of that <div>:
outputDiv.innerHtml = 'Hello world!';
Or you can append to it:
outputDiv.innerHtml = outputDiv.innerHtml + '<br>Hello world!';
Or even more compactly with the += operator (thanks nplungjan):
outputDiv.innerHtml += '<br>Hello world!';
You should also look at jQuery at some point, which gives you a whole boatload of convenience functions to make these kind of manipulations a snap.
I hope this sets you in the right direciton.

Categories

Resources