Append Data To Text Area
Solution 1:
If you set an array as the argument of val(), it is implicitly converted to a comma separated string. You can either join the array using allVals.join(), or, if you don't need the values in array form at all, you can concatenate them as a string directly.
I also implemented your request to be able to keep the initial value in the following snippet, by saving it with data(). (You'll probably want to skip the check for omitting the first line break --edit: I implemented a dynamic check to see whether the initial textarea value is empty)
function updateTextArea() {
var allVals = $('#form1').data('initialVal'),
lineCount = 1;
$('.taglist :checked').each(function(i) {
allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val();
lineCount++;
});
$('#form1').val(allVals).attr('rows', lineCount);
}
$(function() {
$('.taglist input').click(updateTextArea);
$('#form1').data('initialVal', $('#form1').val());
updateTextArea();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>Solution 2:
Why you have commas?
Because you implicitly call an toString() on your array, which will return your array items separated by comma. Join your array's items by empty string '' and you will get normal text.
Why you don't get the text ?
You have set the text there, but in the jQuery initializer function you call updateTextArea() at the last line, so it will set text of your textarea with the allVals, which is empty at first time, when you don't select any value.
Here it calls toString implicitly on the arr and gets the string representation of your array.
var arr = ['1', '2', '3'] ;
console.log(arr);Working Example
function updateTextArea() {
var allVals = ['My text here'];
$('.taglist :checked').each(function(i) {
allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
});
$('#form1').val(allVals.join('')).attr('rows', allVals.length);
}
$(function() {
$('.taglist input').click(updateTextArea);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>Solution 3:
After each result gets listed there is a comma I don't know how to remove
I'd like to preload the textarea with some text and have the results listed below it without overwriting my preloaded text
You can get rid of the comma using array.join('').
In regards to not overwriting existing text, you could store the existing text and re-use it when writing the array to the text area
// if you want just the original text and no new line after it do:
var originalText = $('#form1').val();
// if you want a new line after the original text do:
originalText = $('#form1').val() + '\r\n';
function updateTextArea() {
var allVals = [];
allVals.push(originalText);
$('.taglist :checked').each(function(i) {
allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
});
$('#form1').val(allVals.join('')).attr('rows', allVals.length);
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>Solution 4:
Like this it will work, look at join
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push((i!=0?"\r\n":"")+ $(this).val());
});
$('#form1').val(allVals.join(" ")).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="textfield" id="form1" name="form1">My text here</textarea>
<div class="taglist">
<label><input type="checkbox" value="Value 1">Value 1</label>
<label><input type="checkbox" value="Value 2">Value 2</label>
<label><input type="checkbox" value="Value 3">Value 3</label>
<label><input type="checkbox" value="Value 4">Value 4</label>
<label><input type="checkbox" value="Value 5">Value 5</label>
</div>Solution 5:
You can try:
http://codepen.io/joaocarvalhowd-1472219370/pen/egoBKQ?editors=1111]
var text_initial = document.querySelector('#form1').value + "\r\n";
function checkboxsListen() {
var checks = document.querySelectorAll('.taglist input[type="checkbox"]');
Array.prototype.forEach.call(checks, function(check) {
check.addEventListener('change', function() {
updateTextArea();
})
})
}
checkboxsListen();
function updateTextArea() {
var textarea = document.querySelector('#form1')
textarea.value = text_initial;
var checks_selected = document.querySelectorAll('.taglist input[type="checkbox"]:checked');
Array.prototype.forEach.call(checks_selected, function(check) {
textarea.value += check.value + "\r\n";
})
}
Post a Comment for "Append Data To Text Area"