We Keep Coding

How to get ckeditor textarea value using jquery?

I am using ckeditor on textarea but i could not get data from it.
Code :
<textarea name="DSC" class="materialize-textarea"></textarea>
<script>
CKEDITOR.replace('DSC');
</script>
Jquery :
var title = $('input[name=TITLE]').val();
var desc = $('textarea[name=DSC]').text();
var formdata = 'TITLE='+title+'&DSC='+desc;

No need for jQuery CKEditor has its own method to get data from converted textarea:
var desc = CKEDITOR.instances['DSC'].getData();
OR:
var desc = CKEDITOR.instances.DSC.getData();

Use id attibute in textarea and use that id in CKeditor instead of textarea's name check bellow
<textarea name="textareaname" id="textarea-id"></textarea>
CKEDITOR.replace( 'textarea-id');//use id not name//
var ckValue = CKEDITOR.instances["textarea-id"].getData(); or
var ckValue = CKEDITOR.instances.textarea-id.getData();

alert(CKEDITOR.instances.DSC.getData());

Past Text area id below.
CKEDITOR.instances['Text_Area_Id_Here'].getData();
For example, i have text area
<textarea class="form-control" id="Description" name="description" width="100%" height="150" ckeditor="true" maxlength="20000" ismandatory="false">
</textarea>
I got value of text area like this
var description = CKEDITOR.instances['Description'].getData();

Using the jQuery_Adapter you may write:
$(function () {
$('textarea[name="DSC"]').ckeditor();
$('#btn').on('click', function(e) {
console.log('ckeditor content: ' + $('textarea[name="DSC"]').val());
})
});
Include files:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>
HTML:
<textarea name="DSC" class="materialize-textarea"></textarea>
<button id="btn">Get text</button>

<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<button type="button" id="getDataBtn">Get Data</button>
</form>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
$(document).ready(function(){
$("#getDataBtn").click(function(){
var editorData= CKEDITOR.instances['editor1'].getData();
alert(" your data is :"+editorData);
})
});
</script>

//getting data form ckeditor in textarea.
var NodeDataSessionTextarea = {};
jQuery('.class-textarea').each(function(index, el) {
var editor_id = jQuery(this).attr('id');
var elevalue = jQuery(this).val();
// Getting ckeditor instance.
var editor = CKEDITOR.instances[editor_id];
if (editor) {
editor.on('key', function(e) {
var self = this;
setTimeout(function() {
//store data in object with id
NodeDataSessionTextarea[editor_id] = self.getData();
}, 10);
});
editor.on('afterCommandExec', function(e) {
var self = this;
setTimeout(function() {
//store data in object with id
NodeDataSessionTextarea[editor_id] = self.getData();
}, 10);
});
editor.on( 'blur', function() {
//store data in session
var nodedataencodetextarea = JSON.stringify(NodeDataSessionTextarea);
sessionStorage.setItem("NodeDataSessionTextarea", nodedataencodetextarea);
});
}
});
//put data in ckeditor.
var editor = CKEDITOR.instances[id];
if (editor) {
editor.setData(getTemplateData);
}

For an update of Bogdan Kuštan's answer using CKEditor 5 (tested in may 2022):
editor.getData() is the new way of getting the Data from the editor.
Here is one common example of using it: filling an hidden field on submitting the form.
import ClassicEditor from '.../src/ckeditor.js';
ClassicEditor
.create('#editor-container')
.then(editor => {
persistForm(editor);
};
function persistForm(editor)
{
document.querySelector('form').addEventListener('submit', (e) => {
document.querySelector('.hidden-input').value = editor.getData();
});
}
This post is also a reminder for myself later.

You should use getData() method to get data from CKEDITOR.
<textarea name="DSC" class="materialize-textarea" id="DSC"></textarea>
<script>
CKEDITOR.replace('DSC');
</script>
//reference the id DSC
var desc = CKEDITOR.instances['DSC'].getData();

PHP/JavaScript Not affecting selectbox

I created JavaScript bellow the $titleBlock, and when I load the page, it's not affecting the select-box. What should I change?
$titleBlock->addCell(
'<select id="my-select" size="1" class="text" name="user_id">
"'.$option_str.'"
</select>'
);
<script type="text/javascript">
var mySelect = document.getElementById('my-select');;
var setBgColor = function (select) {
select.style.color = select.options[select.selectedIndex].style.color;
};
mySelect.onchange = function () {
setBgColor(this);
document.form_buttons.submit();
};
if(-1 != mySelect.selectedIndex) {
setBgColor(mySelect);
};
</script>

what do you see in log? when
if(-1 != mySelect.selectedIndex) {
console.log(mySelect.selectedIndex);
setBgColor(mySelect);
}
If nothing then that means you are not at all getting handle of select box try to put the script in onload and then try that should work

After submiting the text disappears jQuery

When I write some text in the input field. And want it displayed below the input field, when pressing the submit button it disappears. I don't know why.
Live Demo
HTML:
<textarea id ="comments" cols="30" rows="3"></textarea>
<input type="submit" value="Submit" id="submit"/>
<div id="divComments"></div>
Jquery:
function addComment(name1) {
var container = $('divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var div = $('<div />');
$('<label />', {
id: 'comment' + id,
text: name1
}).appendTo(div);
div.appendTo(container);
}
$('#submit').click(function () {
addComment($('#comments').val());
$('#comments').val("");
});

You missed the # for id selector, change
var container = $('divComments');
to
var container = $('#divComments');
See the fixed demo.

The selector for the divComments div is missing the # for the id selector.
function addComment(name1) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var div = $('<div />');
$('<label />', {
id: 'comment' + id,
text: name1
}).appendTo(div);
div.appendTo(container);
}
$('#submit').click(function () {
addComment($('#comments').val());
$('#comments').val("");
});
Working fiddle.

As well as fixing the following line to add a hash
var container = $('#divComments');
you will also want to change the submit function:
$('#submit').click(function (e) {
e.preventDefault();
addComment($('#comments').val());
$('#comments').val("");
});
This will stop the form actually been submitted (and reloading the page) - which is probably the reason for your text disappearing. If you don't have a form surrounding your inputs then you don't need to bother with the second part of this answer.

reset input fields not working (Javascript)

Here is my JSFiddle: http://jsfiddle.net/kboucheron/XVq3n/15/
When I start a list of items and I click on "Clear", I would like to text input be cleared as well.I'm not able to clear the fields
<input type="text" placeholder ="Add List" id="listItem"/>
<button id="addButton">add Item</button>
<button id="clearButton">Clear Items</button>
<ul id="output"></ul>
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem').value;
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});

Just need to make this change here:
var text = document.getElementById('listItem');
You had this:
var text = document.getElementById('listItem').value;
What you are doing is getting the value of the input text, when you actually want the input element.
Also here is the updated fiddle: http://jsfiddle.net/XVq3n/16/

you are referring in your code to input's value, replace
var text = document.getElementById('listItem').value
with
var text = document.getElementById('listItem')

Ok, it's a really simple (but easy to make) error. Try this change and it should work:
clearButton.addEventListener("click", function(e) {
var text = document.getElementById('listItem');
var addItem = document.getElementById('output');
addItem.innerHTML = '';
text.value = '';
});
Basically, you did .value one too many times. Hope that helps.

jQuery: onclick, edit field and show+save into an variable

Right now I have this in Javascript without jQuery:
Here is it: http://jsbin.com/ewihu3
It's working just fine, but I wish to use jQuery for making the code simpler and shorter.
I want exactly same things to do as on the example above, that when you click on the text, it should turn into an input field. And on blur it should display what you've edited in the box, and then make a variable (like e.value on the example above) so I can send that in a ajax call later.
How can i do this in jQuery?

You can use the jEditable plugin
Or you can start something similar pretty simply by yourself too, with something like this:
$('span.editable').click(function() {
var input = $('<input type="text" />', {
value: $(this).text()
}).click(function() {
$.get('editsave.php?tekstny=' + $(this).value(), function(response) {
var span = $('span', {
text: response
});
$(this).replaceWith(span);
});
});
$(this).replaceWith(input);
});

Editable header or Button by clicking on edit button, type your own text and click on Ok to replace your text.
function editable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "true";
h1.setAttributeNode(att);
}
function noteditable() {
var h1 = document.getElementsByTagName("H1")[0];
var att = document.createAttribute("contenteditable");
att.value = "flase";
h1.setAttributeNode(att);
}
function editable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "text";
input.setAttributeNode(att);
}
function noteditable2() {
var input = document.getElementsByTagName("input")[0];
var att = document.createAttribute("type");
att.value = "button";
input.setAttributeNode(att);
}
$('.my-button').click(function() {
$(".my-textbox").focus()
});
$('.my-button2').click(function() {
$(".button").focus()
});
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class='my-textbox' contenteditable="false">Hello World</h1>
<button class='my-button' onclick="editable()">Edit</button>
<button onclick="noteditable()">OK</button>
<br>
<br>
<br>
<input type="button" class="button" value="Hello World" />
<br>
<br>
<button class='my-button2' onclick="editable2()">Edit</button>
<button onclick="noteditable2()">OK</button>