Develop Reference

Retrieve data after pressing submit button

<div class="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</div>
How to retrieve data in textarea field after clicking on submit button. Using jquery, ajax?

This code should work:
function getdata(Event){
Event.preventDefault()
let chatInput = $('#chat-input').val();
$('#result').text(chatInput)
}
$('#message-send').click(getdata);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form class="chat-input-holder"> <!-- replace div with form -->
<textarea class="chat-input" id="chat-input"></textarea>
<input type="submit" value="Send" id="message-send" class="message-send"/>
</form>
<p> for the example we will place the text on the div bellow. but use the data however you like</p>
<div id='result'>
</div>
Note that I changed the div tag into a form tag, and added some IDs.

You can find here a solution using jQuery. The output is currently store in a div with id="out", you can customize the code.
document.forms["chat-input-holder"].addEventListener('submit', e => {
e.preventDefault();
let text = $(".chat-input").val();
$("#out").html(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="chat-input-holder">
<textarea class="chat-input"></textarea>
<input type="submit" value="Send" class="message-send"/>
</form>
<div id="out"></div>

Toggle html button depending if textarea is filled or empty

Hey the task i try to achieve is to activate and deactivate a button depending on, if there is text in a textarea or not.
Here the code I'm trying to get going.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
$(button).prop('disabled', true);
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>
and here a fiddle: Fiddle
What I'm really not understanding here is, why the button which I disabled in the js part is still active
I'm an absolute html/js/web developement newbie, so please give some explanation.
Thanks in advance

The jsFiddle doesn't work because there's no jQuery CDN link.
You can find an updated version, witch includes the jQuery CDN here.
You're using jQuery to disable the button on page-load.
I'll recommend using HTML for that:
<button id="button_01" type="button" value="submit" disabled>
Then, your code appears to work just fine because there's no jQuery needed anymore:
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
textarea.addEventListener('input', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit" disabled>
Modify
</button>
</div>
Note;
Changed event from keyup to input so things like right-click and paste will trigger the event. (Thx to #freedomn-m)

Try like this.
var button = document.getElementById("button_01");
var textarea = document.getElementById("textarea_01");
button.disabled = true;
textarea.addEventListener('keyup', function() {
button.disabled = !this.value;
});
<div id="div_01">
<h1>String Editor</h1>
<textarea id="textarea_01" rows="5" placeholder="Paste your string here"></textarea>
</div>
<div id="div_02">
<h1>Options</h1>
<button id="button_01" type="button" value="submit">
Modify
</button>
</div>

Problem on Passing getElementById value to textbox Value

I can see the scanned value (id="code") on p element. How can I fill the textbox with this value?
Actually when I press the Scan Barcode button, camera is open and scan an EAN13 barcode, and the value is shown in P element (590123... is the barcode). Can be seen below. But I want to see this value in textbox.
function barcode() {
var resultElement = document.getElementById("code");
// setupLiveReader(resultElement)
}
<p id="code">code is appearing here</p>
<input class="form-control" type="text" id="code">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>

You can't have two elements with the same id. To get the content of the p tag just call innerHTML on it. After that set the value of your input with the new id.
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="codeInput">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
var resultElement = document.getElementById("code").innerHTML;
//setupLiveReader(resultElement)
document.getElementById("codeInput").value = resultElement;
}
</script>

Change the id so that you only have one id="code", then update the script so resultElement has the id of the <input...
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="code-input">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
const resultElement = document.getElementById("code-input");
setupLiveReader(resultElement);
}
</script>

function getValue() {
var resultInputValue = document.getElementById("inputValue").value;
document.getElementById("valueShow").innerHTML = resultInputValue;
}
<p id="valueShow">input value is appear here</p>
<input type="text" id="inputValue">
<button onclick="getValue()" type="submit">Get Value</button>

Cannot make TextArea editable even after removing readonly : Html

JavaScript:
var editBtn = document.getElementById('editBtn');
var saveBtn = document.getElementById('saveBtn');
var textAreaHtml = document.getElementsByTagName("textarea");
editBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
textAreaHtml[0].readOnly = 'false';
});
saveBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
textAreaHtml[0].readOnly = 'true';
});
Html:
<div class="panel-body">
<div>
<input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
</div>
<div class="btn-group-vertical" style="padding: 1%">
<button type="button" class="btn btn-primary" id="editBtn">Edit</button>
</button>
</div>
<div class="tab-content" align="left">
<div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>
<div>{{apexClassWrapper.name}}</div>
<pre class="prettyprint">
<code class="language-java">
<textarea ng-model="apexClassWrapper.body" id="apexBody" readonly="true">{{apexClassWrapper.body}}</textarea>
</code>
</pre>
</div>
<button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
</div>
I have two buttons, save and edit. I have placed event listener for Edit and save to make text area as editable, but this is not working. I am not able to edit the TextArea in the UI? Is there something I am missing?

With some slight tweaking to your click event handlers, you should be in business.
editBtn.addEventListener('click', function (e) {
textAreaHtml[0].removeAttribute('readonly');
});
saveBtn.addEventListener('click', function (e) {
textAreaHtml[0].setAttribute('readonly', true);
});
Your edit button was setting readOnly to false, but readonly is a boolean attribute. When it is present it makes the textarea readonly regardless of if it has a true or false value.

Instead of readonly, use the HTML attribute contenteditable!
I have never used readonly but by toggling the boolean on contenteditable you should be cookin!
https://www.w3schools.com/tags/att_contenteditable.asp

Replace text inside a div element

What should i do if i need to replace the "test test" message with custom one using JavaScript?
<div class="outputmsg_container" style="" id="output_messages"><
button class="btn btn-icon close icon-cross" onclick="GlideUI.get().clearOutputMessages(this); return false;">
<span class="sr-only">Close Messages"</span>
</button>
<div class="outputmsg_div">
<div class="outputmsg outputmsg_error notification notification-error"><img class="outputmsg_image" src="images/outputmsg_error_24.gifx" alt="">
<span class="outputmsg_text">test test</span>
</div>
</div>
</div>

Use innerHTML to change the HTML inside an element.
<label for="newhtml">HTML (or text) to be inserted inside div:</label>
<br/>
<input type="text" id="newhtml"/>
<br/>
<input type="button" id="change" value="Insert" onClick="change()"/>
<br/>
<span id="container"></span>
<script>
function change(){
document.getElementById("container").innerHTML = document.getElementById("newhtml").value;
}
</script>

Here is an example to do this with jquery.
$('.outputmsg_text').html("YOUR CUSTOM TEXT")

Here's an example JSFiddle (REQUIRE JQUERY)
<button id="change">Change Text</button>
<div id="div">
Some text
</div>
<script>
$("#change").click(function(){
var name = prompt("What text shoud it be?");
if(name){
$("#div").html(name);
}
});
</script>