Develop Reference

Contenteditable div can´t be read by Jquery, variable returns as undefined

I need to pass the content from a contenteditable div into an input, in order to submit it with PHP.
I found out that Jquery can´t read its content, I'd be thankful if anyone could solve my problem.
function textChange() {
var str = $('#preblogbody').html();
$("#blogbody").val(str);
alert(str);
}
<form>
.....
<div id="WYSIWYG" id="preblogbody" contenteditable="true" onkeyup="textChange()" onmouseup="textChange()">
</div>
<textarea class="hidden" id="blogbody" name="blogbody"></textarea>
.....
</form>

You have two ID's on the same element. The second one is being ignored.
Change
<div id="WYSIWYG" id="preblogbody" contenteditable="true"...
To
<div id="preblogbody" contenteditable="true"...
and your code works fine as shown

how to concatenate two text areas into one paragraph

I am trying to concatenate two text areas into a paragraph. The two text areas are where a user can enter data and then push a button and have the results displayed in a paragraph.
I cant figure out why I cant get the two text areas to concatenate into a paragraph html element. I did figure out that I can with the same function have the result shown in an additional text area but when I switch the element back to a paragraph..."p" rather than "textarea" my code no longer functions properly.
javascript:
function concatenate(){
document.getElementById("result1").value =
document.getElementById("text_area_1").value + " " +
document.getElementById("text_area_2").value;
}
html:
<div id="requirement #1">
<h1> Requirement #1</h1>
<textarea id="text_area_1"></textarea>
<textarea id="text_area_2"></textarea>
<button type="button" id="button1" onclick="concatenate()">concatenate</button>
<p id="result1"></p
</div>
Im not sure why if I change the "p" to a "textarea" element my function works but when I use the "p" tag, it does not work. I think it may have to do with the document.getElementById(...) using ".value" ? maybe I should be using something else?

result1 doesn't have a value property. It's not a field, it's an HTMLParagraphElement. Use result1.innerHTML instead.
Of course, you may want to HTML escape the contents of the textarea so that you don't accidentally break your own page, in which case you should use result1.textContent.

You are not setting the value for 'result1' properly.
Try this:
function concatenate(){
//I modified this line, changed .value for .innerHTML
document.getElementById("result1").innerHTML =
document.getElementById("text_area_1").value + " " +
document.getElementById("text_area_2").value;
}
<div id="requirement #1">
<h1> Requirement #1</h1>
<textarea id="text_area_1"></textarea>
<textarea id="text_area_2"></textarea>
<button type="button" id="button1" onclick="concatenate()">concatenate</button>
<p id="result1"></p
</div>

How to validate or wrap user inputted HTML to fix unclosed tags

I have text boxes in a form where users can input formatted text or raw HTML. It all works fine, however is a user doesn't close a tag (like a bold tag), then it ruins all HTML formatting after it (it all becomes bold).
Is there a way to either validate the user's input, automatically close tags, or somehow wrap the user input in an element to stop it leaking over?

You may try jquery-clean
$.htmlClean($myContent);

Is there a way to either validate the user's input, automatically close tags, or somehow wrap the user input in an element to stop it leaking over?
Yes: When the user is done editing the text area, you can parse what they've written using the browser, then get an HTML version of the parsed result from the browser:
var div = $("<div>");
div.html($("#the-textarea").val());
var html = div.html();
Live example — type an unclosed tag in and click the button:
$("input[type=button]").on("click", function() {
var div = $("<div>");
div.html($("#the-textarea").val());
var html = div.html();
$(document.body).append("<p>You wrote:</p><hr>" + html + "<hr>End of what you wrote.");
});
<p>Type something unclosed here:</p>
<textarea id="the-textarea" rows="5" cols="40"></textarea>
<br><input type="button" value="Click when ready">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Important Note: If you're going to store what they write and then display it to anyone else, there is no client-side solution, including the above, which is safe. Instead, you must use a server-side solution to "sanitize" the HTML you get from them, to remove (for instance) malicious content, etc. All the above does is help you get mostly-well-formed markup, not safe markup.
Even if you're just displaying it to them, it would still be best to sanitize it, since they can work around any client-side pre-processing you do.

You could try and use : http://ejohn.org/blog/pure-javascript-html-parser/ .
But if the user is entering the html by hand you could just check to have all tags closed properly. If not, just display an error message to the user.

You can create a jQuery element using the text and then get it's html, like so
Sample
<textarea>
<div>
<div>
<span>some content</span>
<span>some content
</div>
</textarea>
Script
alert($($('textarea').text()).html());
alert($($('textarea').text()).html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<div>
<div>
<span>some content</span>
<span>some content
</div>
</textarea>

The simple way to check if entered HTML is actually valid and parseable by browser is to let browser try it out itself using DOMParser. Then you could check if result is ok or not:
function checkHTML(html) {
var dom = new DOMParser().parseFromString(html, "text/xml");
return dom.documentElement.childNodes[0].nodeName !== 'parsererror';
}
$('button').click(function() {
var html = $('textarea').val();
var isValid = checkHTML(html);console.log(isValid)
$('div').html(isValid ? html : 'HTML is not valid!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="80" rows="7"><div>Some HTML</textarea> <button style="vertical-align:top">Check</button>
<div></div>

how to add multiple div within one div using angular.js

I am new to Anjular.js. I just started to learn today so I hope all you can help me.
I have html file like this:
<div ng-conrtoller="add">
<div >
<div>{{ username }}</div>
<div>
<input type="text" ng-model="name">
<button ng-click="addname">save</button>
</div>
In controller.js file :
app.controller("add",function($scope)
{
$scope.addname=function()
{
$scope.username=$scope.name;
}
});
When I click on save button after I enter text into text filed, the entered text will be displayed within one div. If I again do the same, the name will be replaced but I want to display previously entered text as well as any text entered in the future.
Thanks.

i want to display previously entered text as well as in future enter text
You can use array to store multiple items, push items to array and use ngRepeat
HTML
<div>
<div ng-repeat="username in usernames">{{ username }}</div>
<div>
<input type="text" ng-model="name">
<button ng-click="addname()">save</button>
JS
$scope.usernames = [] ;
$scope.addname=function() {
$scope.usernames.push($scope.name);
$scope.name = "";
}
Working Demo
Currently use only unique items for testing

Javascript form innerHTML

i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .

There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.

I don't think there is any document.getElementsById function. It should be document.getElementById.

"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/