We Keep Coding

New Line character in title attribute does not work in tooltip

I have an html form where I need to add new line character in to the title attribute of the anchor tag. I found a few solutions online but none of them work in my code.
I tried adding
\n
<br>
not sure what is missing. Is it because of data-toggle that is blocking from breaking the title attribute?
$(document).ready(function () {
$('form').attr('novalidate', true);
$('[data-toggle="tooltip"]').tooltip();
<a class="helptext fa fa-question-circle" data-toggle="tooltip" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces."></a>

Setting the title with JavaScript works for me.
document.getElementById('asdf').title = 'line1\nline2';

A popover would be a better solution, but it is possible to achieve this functionality in browser:
$(document).ready(function () {
$('form').attr('novalidate', true);
//$('[data-toggle="tooltip"]').tooltip();
$('.helptext')[0].title = "I like\nlines"
// you can also use $('.helptext').attr("title",decodeURI("I like%0A to%0Ause%0Alines"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="helptext fa fa-question-circle" data-toggle="tooltip" href="#" title="Additional information -
 You can provide further information here to for your
 application to issue a new card.
 Ensure a maximum of 200 characters
 is entered – including spaces.">test</a>

jQuery: Preserve user-inputted line breaks in <textarea>

I've been scouring Google and SO for hours but can't seem to find an answer to this for the life of me!
All I want to do is preserve the line breaks entered into a <textarea> element by the user, to post the content via a jQuery $.ajax() call. If I simply submit the form to a page as usual, this works, but I've been told by my boss to use REST/AJAX.
Many, many posts on SO and across the net in general mention replacing \n's with <br />'s, or using white-space: pre-wrap; in the element's CSS. These solutions do not work for me as the line breaks simply don't show up in Chrome Developer Tools.
Code snippet:
<form id="addPostForm" role="form" method="post" action="/blog">
<div class="form-group">
<textarea rows="5" id="postBody" name="postBody"></textarea>
...more input controls
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<script type="text/javascript">
$(document).on('submit', '#addPostForm', function() {
var postBody = $(this)[0].postBody.value;
...more code
});
</script>
When I enter e.g.:
"This is the first paragraph.
And here is another.
And yet another."
The postBody variable's value is:
"This is the first paragraph. And here is another. And yet another."
This is driving me crazy! Surely this shouldn't be as hard as it seems to be!
P.S. I don't think it should make a difference, but just in case anyone is wondering, I'm using Python/Pyramid, Jinja2 and Bootstrap 3 for this project.

Use this in JS
$("input[type=submit]").click(function(){
$.ajax({
type: "POST",
url: "yoururl",
data: $("#addPostForm").serialize()
(...)
});
});
In your server side code you can get POST value postBody with original spaces.

It would appear to me that this problem stems from the Chrome Dev Tools stripping the line breaks. Change the tool settings, or try something else like firebug.

Try splitting the lines by '\n' (yes I have tested this) and rejoin them with tags, check this out:
$('textarea').val().split('\n')
put this in your onclick function and set a breakpoint on it if you are using Chrome, it splits the lines into an array. if you join them with
.join('<br>')
you should be good to go.

Oops sorry for wasting your time, it was as simple as using $('#postBody').val() instead of $(this)[0].postBody.value. Thanks anyway to all commenters and answerers!

How to remove a duplicate HTML element with Javascript

I got into a trouble that my code had been created three times with IE 8 without any reason...
However, it works well with FF and Chrome. Please let me know how I can remove the duplicate?
My Javascript:
var get_text_approve_2 = "Transportation";
$(get_approve_2).after("<a class='set_backgr' href=''>" + get_text_approve_2 + "</a>");
HTML:
In FF & Chrome - I got:
Transportation
In IE 8 - I got:
<A class=set_backgr href="">Transportation </A>
<A class=set_backgr href="">Transportation </A>

you can use
while($(".set_backgr").length > 1)
$(".set_backgr:first").remove()
however is more helpful understand why there is a duplicate.

Try using .slice()
$('.set_backgr').slice(0, -1).remove()

Try
:not()
:last
$('.set_backgr:not(:last)').remove();
$('.set_backgr:not(:last)') select all elements with class set_backgr except the last one.
Fiddle Demo
Fiddle Demo with only one element

you might have include twice this file
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
please check it

Get onClick element to return to the main element?

I'm awful with javascript and I'm having a problem with this one.
I'm using this code
<script>
function changeNavigation(id){
document.getElementById('members')
.innerHTML=document.getElementById(id).innerHTML
}
</script>
and HTML
`<span onClick="changeNavigation('members')" >MEMBERS</span>
<span onClick="changeNavigation('help')" >HELP</span>`
<div id="members>...</div>
<div id="help" style="display: none;>...</div>
But I can't get <span onClick="changeNavigation('members')" >MEMBERS</span> to actually go to an element "members" without duplicating everything inside of it in another id.
Is there a way to do this?

This can be done using only standard javascript, but personally I'd recommend going ahead and getting used to using jQuery. Here's an example jsfiddle using jQuery: http://jsfiddle.net/JnvCR/2/
Don't forget to include jQuery in your website:
<script src="http://code.jquery.com/jquery.js"></script>

You need to correct your syntax errors. Use onclick instead of onClick (pedantic). Make sure you close your attributes properly, you are missing a few closing " marks.
updated html
<span onclick="changeNavigation('members')" >MEMBERS</span>
<span onclick="changeNavigation('help')" >HELP</span>`
<div id="members">...</div>
<div id="help" style="display: none;">...</div>
There is also an error with your logic as you are simply replacing the contents of div#members with itself.
Updated JS without syntax errors, but still with dodgy logic
function changeNavigation(id){
document.getElementById('members').innerHTML=document.getElementById(id).innerHTML;
}
Demo fiddle
http://jsfiddle.net/ADGCV/
As far as your actual question goes, can you explain what you would like to happen a bit better??
Here's a possible solution http://jsfiddle.net/ADGCV/1/

Javascript not writing forward slash

I have the following: http://jsfiddle.net/mVs9T/13/
Could someone please tell me why the output is printing
<br>
instead of:
<br/>
like here: http://f.imgtmp.com/Xjoq3.png

Yes, because that is how chrome interprets the <br /> tag. It's just aesthetic; you need not worry about it.

We added alert(txt); and it gave us <br/> - looks good to go.

That's browser behaviour. It shouldn't be a problem.

Since nothing can go between a <br> tag the /> part is not necessary. This is probably why the browser doesn't display it.