When click a button add value to textarea - javascript

<script type="text/javascript">
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
$("#txt-area").text(cntrl+",");
//alert (cntrl);
});
});
</script>
When I click to my character on my html page character's value sets to textarea, but when I click to another character previous char disappears. I know about something about arrays in JS but how can I handle this.
How can I add values to textarea properly without disappearing?

Try
$(document).ready(function () {
$(".buttons").click(function () {
var cntrl = $(this).html();
$("#txt-area").val(function (_, val) {
return val + cntrl + ","
});
//alert (cntrl);
});
});
Demo: Fiddle
or
$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");
Demo: Fiddle - I prefer using val() because I consider it as a input element

Arun's answer above works, but it will add a comma to the end. If you want to avoid that, place the comma before the new value, and then have the code check to see if this is the first time something is being added, and not place a comma that time.
$(document).ready(function () {
var oldvalue;
var newvalue;
$(".buttons").click(function () {
oldvalue = $("#txt-area").val(); //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
$("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
});
});

Try,
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
var xTxtArea = $("#txt-area");
xTxtArea.text(xTxtArea.text() + cntrl + ",");
});
});

Related

how to get value from textbox on click of button in jquery

enter image description here
this is the image, in this, i have a button when I click the button it should show me the updated value of textbox into the alert box. I have coded something like this.
$(document).on('click', '#Button1', function () {
var newStr = document.getElementsByName('input');
var str = '';
for (var i = 0; i < newStr.length; i++)
{
str = str + newStr.item(i).value;
}
alert(str);
});
But things are not working properly. Need help thanxx.
$(document).on('click', '#table1 tr', function () {
var tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
$(tableData).each(function (index, value) {
$('#txt' + index).val(value);
});
});
this is sending table data to the textbox. I just want to get all the value of textbox into one variable and want to check that value for further process.
you haven't gave your html. but using this you can access all your input type.
$("#formID :input").each(function(){
var input = $(this);
});
or IF u want to access only input type = text
use
$("#formID input[type=text]")
Hope this will help you out

Summation of text fields on keyup causes issues in first field of a row

I have a table.I am trying to find out the summation as below:
td(1) + td(2) + td(3) = td(4), td(5) + td(6) + td(7) = td(8), td(9) + td(10) + td(11) = td(12).
Here is my code:
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
The code above works fine. But my problem is, I can't enter any thing to first column (ie, td:eq(0)). Whats wrong with my code?
http://jsfiddle.net/b0svwpnn/3/
You need to explicitly exclude the first input from the nth-child selection, which you can achieve using :not(). Try this:
$("#table tr").slice(2).find("td:nth-child(4n + 1):not(:first)")
Updated fiddle

Need to append / delete id into hidden field on "change"

I ve got numérous checkboxes in my page, each time I click a checkbox, I get the id im interested in and I fill a hidden form. My script is working but if I unclick the checkbox, it should delete the id from the hidden field (right now it appends again the id in the hidden field). How can I writte such a script ? Here's my code so far:
$(document).ready(function() {
var string = "";
$('.checkbox').on('change', function() {
var subscription_id = $(this).parent().attr('id');
if(string == "") {
string = subscription_id;
} else {
string = string + ", " + subscription_id;
}
$('#select_players').val(string);
$('#subscription_ids_export').val(string);
})
})
You can simplify this by retrieving only the subscription_id values from checkboxes which are checked instead of adding/removing values each time.
Try this:
$('.checkbox').on('change', function() {
var subscriptionIds = $('.checkbox:checked').map(function() {
return $(this).parent().prop('id');
}).get().join(',');
$('#select_players').val(subscriptionIds);
$('#subscription_ids_export').val(subscriptionIds);
})
Example fiddle

Edit on site with Javascript

I have a school assignment that I would love to have a on site edit admin panel.
I coded this but I just cant get it to work properly, as every time I double click in one and then out it replaces the value with the previous value.
<script type="text/javascript">
$(function() {
var bound = $("p").bind("dblclick", function(event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function(event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
$(document).click(function() {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
currentEle.html(value1234);
});
}
</script>
Here is the jsfiddle http://jsfiddle.net/x6e16d3n/3/
The issue is because every time you edit you create a new click handler attached to the document that has a reference to the current element at the time of creation.
This handler is still active when you are editing another object and still has a reference to the old element (look up closures to understand why) but is taking the value to add to the p from what ever .tedit is on the screen so in the end they all get updated with the same text.
One quick soloution would be to take this click handler out of the dit function and declare it once, check if edit is on the screen and if it is then make the edits parent html equal the value of the input box
$(function () {
var bound = $("p").bind("dblclick", function (event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function (event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
}
$(document).click(function () {
if ($(".tedit").length) {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
$(".tedit").parent().html(value1234);
}
});
example fiddle http://jsfiddle.net/x6e16d3n/11/

Remove string from input on click? jQuery

I'm trying to write my own function to wrap each string separated by a comma in a tag, I have this working, but on the 'close' click id like to remove the corresponding string from the input, is this possible at all?
jQuery
$('body').on('click', '.tag span', function(){
$(this).parent().hide();
});
$('input').keyup(function(e) {
$('.result').html('');
var valueArr = $(this).val().split(',');
for(var i=0; i<valueArr.length; i++){$('.result').append('<div class="tag">'+valueArr[i]+'<span> X</span></div>')};
});
http://jsfiddle.net/Liamatvenn/7huQ4/1/
Try this:
$('body').on('click', '.tag span', function(){
$(this).parent().hide();
$(this).closest('.result').prev('input').val(""); //get the input respective to the clicked close button.
});
.closest() will get you to the parent .result and target only its previous input which generated the tag using .prev().
Demo
Much simpler, use index of the clicked tag item and remove that respective item from the array based on the same index as they are inserted in that order itself.
$('body').on('click', '.tag span', function () {
var $parent = $(this).closest('.tag');
var index = $parent.index(); //Get the index of the `tag`
$(this).closest('.result').prev('input').val(function (_, value) { //use val function argument
var values = value.split(','); //split the value
values.splice(index, 1); //remove the item from array
return values.join(','); //join them back
});
$parent.remove(); //then remove your tag
});
Demo
You could always modify your click handler to do something like:
$('body').on('click', '.tag span', function(){
var $this, $input, val, arr;
$this = $(this);
$input = $('input');
arr = $input.val().split(',');
val = $this.parent().text().replace(' X','');
arr.splice(arr.indexOf(val), 1);
$input.val(arr.join(','));
$this.parent().hide();
});
You can see it working at http://jsfiddle.net/eF5ev/
You can just store your elements in an array and remove the ones that get clicked by their index:
var $tag = $('<div class="tag"><span class="text"></span><span class="close">×</span></div>');
var tags = [];
$('.result').on('click', '.tag .close', function() {
var $parent = $(this).parent();
tags.splice($parent.index(), 1);
$parent.remove();
$('input').val(tags.join(', '));
});
$('input').keyup(function() {
tags = []
$('.result').empty();
$(this.value.split(/\s*,\s*/)).each(function(index, value) {
var tag = $tag.clone();
tag.find('.text').text(value);
tag.appendTo('.result');
tags.push(value);
});
});
Demo: http://jsfiddle.net/7huQ4/9/
You can input data on close button click. jquery text() method to get text inside tag.
remove that text from input data. then remove leading and trailing commas with regular expression.
Try this one.
$('input').keyup(function(e) {
var input = $(this); /* Store input object for replaced value insertion */
$('.result').html('');
var valueArr = $(this).val().split(',');
for (var i = 0; i < valueArr.length; i++) {
$('.result').append('<div class="tag">' + valueArr[i] + '<span> X</span></div>');
}
$('span').click(function() {
/* Removal of unwanted string like ' X' (close button) */
var data = $(this).parent().text();
data = data.replace($(this).text(), ""); /* Basic javascript replace() function*/
/* Delete unwanted commas, Store modified string to input field */
input.val(input.val().replace(data, '')
.replace(/^[,\s]+|[,\s]+$/g, '')
.replace(/,[,\s]*,/g, ','));
});
});
demo : http://jsfiddle.net/7uqEg/

Categories

Resources