Javascript writing into a text area from button clicked - javascript

I'm wanting to write into a textarea from buttons clicked by users using Javascript or jQuery
Like so:
<html>
<head></head>
<body>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<br/><br/>
<textarea></textarea>
</body>
</html>
So a user can click one of the "QWERTY" buttons here and it will be pasted into the box below. Is there a relatively simple way to do this? I've looked up some examples online, but they all go overboard for a novice like me.
It would also be great if we could write text to the textarea characters that aren't on the button
I can't seem to get this to work
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
</script>
</head>
<body>
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
</body>
</html>

If you want to just append to the end of the textarea then use
$('button').on('click', function(){
var letter = $(this).text();
$('textarea')[0].value += letter;
});
Full demo
$(function() {
$('button').on('click', function() {
var letter = $(this).text();
$('textarea')[0].value += letter;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>
<br/>
<br/>
<textarea></textarea>

JS
$('button').click(function(){
$('textarea').text($('textarea').text() + $(this).text());
//$('input:text').val($('textarea').text() );
$('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});
HTML
<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>
<input type='text'/>
<br/><br/>
<textarea></textarea>
Updated per OP needs additional appending values after all the button clicked.
Updated again per OP asking "write into the textbox a letter that is different from the button tag says". I would like to store some data for each button using data() to get it.
FIDDLE

How about this:
$('button').click(function(){
$('textarea').text( $(this).text() );
});
jsFiddle Demo
If you want to take this example a bit futher, we can make it so the letters are appended to the textarea, rather than overwriting what was there previously:
var ta = $('textarea'); //cache selector for re-use (see note at bottom)
$('button').click(function(){
ta.text( ta.text() + $(this).text() );
});
Now, let's add a button to erase the textarea. Here we assign an ID to one specific button and check for it:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
ta.text( ta.text() + $(this).text() );
}
});
jsFiddle Demo #2
Notes:
In the 2nd and 3rd examples, we cached the selector (saved the reference into a variable) for speed.
Each time the code $('textarea') is hit, the DOM is searched for that selector. Caching the selector eliminates all but the initial search. Not at all important in this simple example, but very useful on a large project.
IDs and Classes are extremely important. They are used similarly by css and by javascript/jQuery, for identifying/selecting elements.
The same class name can be applied to multiple elements (e.g. several buttons can have the class), but no two elements are allowed to have the same ID.
In response to your question:
var ta = $('textarea');
$('button').click(function(){
if (this.id == "eraseit"){
ta.text('');
}else{
if ( $(this).hasClass('bob') ) {
ta.text( ta.text() + ' bob' );
}else if ( $(this).hasClass('x') ) {
var ans = prompt('What is your name?');
ta.text( ta.text() + ans );
}else{
ta.text( ta.text() + $(this).text() );
}
}
});
jsFiddle Demo #3

Related

Get previous value on input event

I have a value that I must change dynamically : the original value is 6 and I can customize it. If I put 7 on an inputbox, I now have 13. When I add another number, for example 71 my value change by 13 + 71. I want to substract the 13 with the previous value (7) to get my original one which is 6.
Here is my snippet :
$('.test :input').on('input', function(){
var ok = $('.ok');
ok.text(parseFloat(ok.text()) + parseFloat($(this).val()))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok" style="background-color: white">
6
</div>
<div class="test">
<input type="text"/>
</div>
If you try to type 45 you should have 51 and you have 55.
I already tried with "focusing" as shown on some threads but I'm not leaving the input so it doesn't work. I don't know how to get my previous value.
It's not entirely clear what you are asking for. But I can see your selector is wrong. Also you want to make sure the document is loaded before you query elements in it.
I change the event listener to an onChange so that the addition doesn't happen for every keypress.
$(document).ready(function() {
$('.test input').on('change', function() {
var ok = $('.ok');
ok.text(parseFloat(ok.text()) + parseFloat($(this).val()))
})
});
Here's a plunker of it running.
Here's another guess at what you're asking, plunker. Which stores the initial value as an attribute.
$(document).ready(function() {
var ok = $('.ok');
$('.ok').text(ok.attr('data-initial-value'));
$('.test input').on('change', function() {
ok.text(parseFloat(ok.attr('data-initial-value')) + parseFloat($(this).val()))
})
});
<div class="ok" data-initial-value="6" style="background-color: white">
</div>
As #Doug suggested, you might use an attribute to store the initial value:
$('input').on('input', function() {
var ok = $('.ok');
ok.text(+(ok.attr('i')) + +($(this).val() || 0))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok" i="6">6</div>
<input type="text" />
Thanks all for helping and hints, and sorry for messy explanations...
Here is what I did and it works : when I focus I put the old value in an attribute then when I add numbers I substract my actuel number with the stored number.
$('.test input').on('focus', function(){
$(this).attr('value', $(this).val());
});
$('.test input').on('change', function(){
var valActuelle = 0;
if($(this).attr('value') !== ''){
valActuelle = $(this).attr('value');
}
var ok = $('.ok');
ok.text(( parseFloat(ok.text()) - parseFloat(valActuelle)) + parseFloat($(this).val()) );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ok" style="background-color: white">
6
</div>
<div class="test">
<input type="text"/>
</div>
It works only if you lose the focus but in my case I'm ALWAYS losing the focus

how do i check values individually of appended inputs

how do i check values individually of appended inputs
example i want to get the value of only the second appended input thanks
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput">');
});
</script>
<div class="samplediv">
<input type="text" class="sampleinput">
</div>
<button class="addinput"></button>
</body>
</html>
Add a unique class for each input and use that class to get the value. For the second one, use something like:
$("input.num-2).val();
var num = 1;
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput num-' + num + '">');
num++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="samplediv">
</div>
<button class="addinput">Add input</button>
This is just one way (not the best way) to accomplish what you are asking for.
Here is a working example: https://jsfiddle.net/zzukok0j/
$(".addinput").click(function(){
$('.samplediv').append('<input type="text" class="sampleinput">');
var counter = 0;
$('.sampleinput').each(function(poop) {
if(counter===1) {
alert( $(this).val() );
} else {
counter++;
}
});
});
use jquery each function to select each field and do whatever you want...
$('input[type="text"]').each(function(){
//do something
});
The following piece of code will allow you to get the value of each of the appended inputs.
var $inputs = $('.samplediv input');
$inputs.each(function(index) {
value = this.val();
// now you can use value for whatever you need
console.log(value);
});
I hope this helps. Happy coding!

converting input type text to plain text

i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).
as an example:
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:
this is an example text after pressing the button!
click!
i have been searching around and have not found a working solution yet, hope someone can help me out
$('button').click(function(){
$('body *').replaceWith(function(){
return this.value || this.innerHTML;
});
});
http://jsfiddle.net/pYw9P/
This should do it I think.
function disable_all() {
var fs = $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
span.insertAfter(fs);
fs.remove(); // or fs.hide(); in case you want it later.
}
Try:
HTML:
<input type="text" id="fileserver">
<button id="but">click!</button>
JS:
$( "#but" ).click(function() {
var text=$( "#fileserver" ).val();
$( "body" ).html(text);
});
DEMO
This should be helpful to you -
There are several way to achieve your task :
Solutions 1 -
function disable_all()
{
$('#content').remove();
$('#fileserver, button').hide();
$('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}
Working Fiddle
Solution 2 -
function disable_all()
{
$("body").html($("#fileserver").val());
}
Working Fiddle
you can do this hiding the textbox
<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>
and
$(document).ready(function(){
$("#result").hide();
$("#btn").click(function(){
$("#result").text($("#fileserver").val());
$("#fileserver").hide();
$("#result").show();
});
});
demo
The first "non-jQuery" answer...
your HTML:
<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>
your Javascript:
document.getElementById('btn').onclick = disable_all;
function disable_all() {
var input = document.getElementById('fileserver');
var disp = document.getElementById('fileserver_text')
disp.innerHTML = input.value; // get the text from the input and set the div text
disp.style.display = 'block'; // show the div
input.style.display = 'none'; // hide the input
}
JSFiddle
If you are using jQUery, this will help you,
http://jsfiddle.net/DCak6/
function save(){
$('input,textarea').each(function(){
var $this = $(this);
$this.after('<span class="value">' + $this.val() + '</span>');
$this.remove();
})
}
You may be better off with taking the text from the text field, copying the value and putting it into another div
<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>
<script type="text/javascript">
function disable_all() {
$('#textToCopy').html($('#fileserver').val());
$('#fileserver').hide();
}
</script>

How can I get the data-id in an appended button?

JavaScript
$("#btn").on('click', function(){
$("#result").append("<button type='button' id='btnid'
data-id='show' //this is what I want to get
class='close pull-right' aria-hidden='true'>some text here</button>");
});
HTML
<button id="btn">CLICK HERE</button>
<div id='result'></div>
<button id="submit">SUBMIT HERE</button>
I want to display the data-id='show' from the appended button after i click the button with an id="submit". As you can see, the div with id="result" is just like an container of all the appended text.
So far, this is what I have,
JavaScript
$('#submit').click(function(){
$( "#result" ).each(function( index ) {
console.log( index + ": " +$(this).text());
});
});
But with this code, i can only retrieve the text, "some text here". But what i needed is the data-id of my appended button.
I also tried the code below, but it is not working.
JavaScript
$('#submit').click(function(){
$( "#result" ).each(function( index ) {
console.log( index + ": " + $( this ).html($(this).html($(this).attr("data-id"))));
});
});
To get the data-id of the buttons you have in the #result element, you may do this :
$('#submit').click(function(){
$('#result button').each(function(i){
console.log(i, ':', $(this).data('id'));
});
});
try this
$('#submit').click(function(){
console.log($("#result").find("button").data('id'));
});
make sure you id is unique.... each with ids does not make sense
If the user clicks the #btn "CLICK HERE" button more than once you will end up with multiple new buttons appended within #result (which would be invalid html given that you'd then have duplicate id values), so you'd need to loop through those buttons with .each() rather than trying to loop through #result with .each():
$('#submit').click(function(){
$("#result").find("button").each(function(index ) {
console.log( index + ": " + $(this).attr("data-id"));
});
});
Demo: http://jsfiddle.net/NXU9e/
NOTE: The markup for your #result element is missing the / in the closing </div> tag.

How can I make this feature faster in Javascript?

I have created a highlight feature that will highlight anything contained in a <p> red using a user specified keyword. When the submit button is clicked Javascript/jQuery pull the keyword from the input field and compare it to any lines that conain it and then highlight those lines red. It works great... but its slow. Is there another way to do this that is faster when working with over 1000 lines of <p>?
HTML
Keyword: <input type="text" id="highlight_box" class="text_box" value="--Text--" />
<input type="button" id="highlight" value="Highlight" />
<!--Print area for the Access log-->
<div id="access_content" class="tabbed-content">
<ul id="access-keywords-row" class="keywords-row">
<!--When a user submits a keyword it is placed as a tag here so it can be deleted later-->
</ul><br /><br />
<div id="access_log_print" class="print-area">
<p>Some Content</p>
<p>Some more content</p>
<!--Most of the time this could contain 1000's of lines-->
</div>
</div>
JavaScript
//add highlight and tag
$("#highlight").click(
function(){
var id = $("#highlight_box").val();
if(id == "--Text--" || id == ""){
alert("Please enter text before highlighting.");
}else{
$("#access-keywords-row").append("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + " </li>");
$("#access_log_print p:containsi(" + id + ")").css("color","red"); }
});
//remove highlight and tag
$(".keywords-row").on("click", ".delete_filter",
function() {
var val = $(this).val();
//remove element from HTML
$(this).parent().remove();
$("#access_log_print p:containsi(" + val + ")").css("color","black");
});
Adding color, red means adding the style attribute to each p, I think this can be improved adding a class:
p.highlight {
color:red;
}
And replacing
$("#access_log_print p:contains(" + id + ")").css("color","red");
by
$("#access_log_print p:contains(" + id + ")").addClass('highlight');
This probably speeds a little bit the process
I've written a small solution using jQuery's contains() method. Obviously you can throw in some string validation.
http://jsfiddle.net/W2CZB/
Try defining a css class, e.g.:
.red{background-color:#f00;}
and then instead of adding to each "style=background-color:#f00;" you will just .addClass("red");
just less code to put, but still jQuery will have to go thru all lines and if it is a lot then I guess it depends on your machine speed ;)
The following solution will probably increase performance at the cost of space. It works by building a word mapping of the lines and accessing directly to add or remove the highlight class. This solution also keeps a count of the number of times a filter hit that line so it stays highlighted until the last filter is removed. I have tested with a few lines, I am not sure how will it perform with 1000s. You tell us :)
$(function(){
buildIndex();
$("#highlight").click(
function(){
var id = $("#highlight_box").val();
if(id == "--Text--" || id == ""){
alert("Please enter text before highlighting.");
}else{
var filter = $("<li><img src=\"images/delete.png\" class=\"delete_filter\" value=\"" + id + "\" /> " + id + " </li>");
filter.click(function(){
$(this).remove();
removeHighlight(id)
});
$("#access-keywords-row").append(filter);
$.each(index[id], function(i,line){
if (line.highlightCount)
line.highlightCount++;
else {
line.addClass('highlight')
line.highlightCount=1;
}
});
}
});
function removeHighlight(id) {
$.each(index[id], function(i,line){
line.highlightCount--;
if (line.highlightCount<1)
line.removeClass('highlight')
});
};
});
var index={};
function buildIndex(){
$("#access_log_print p").each(function(i) {
var line = $(this)
var words = line.text().split(/\W+/);
$.each(words, function(i,word){
if (!index[word]) { index[word]=[]; }
index[word].push(line);
});
});
}

Categories