We Keep Coding

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!

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 regex .replace() not working

I vaguely learned how regex work earlier on my last question and thought that I would be able to use it with other strings. Apparently this is not the case. Below are the contents of a div called mqcontainer.
<a style="text-decoration:none;" href="http://i.imgur.com/TeC4R.png"><img src="http://i.imgur.com/TeC4R.png" alt="Posted Image">[br]<small></small></a><small>View Full Image</small>
My goal is to filter out this string so that it instead shows [url=http://i.imgur.com/TeC4R.png]Image[/url] when I click a button. This is what I have been trying:
$("#containerbtn").click(function(){
$("#mqcontainer").each(function(){
$(this).html(
$(this).html().replace(
/<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>/g,
'[url=$1]Image[/url]'
)
);
});
});
It is not working no matter what I try. Can anyone offer me some insight into the problem?

the [br] should be escaped in the regexp: \[br\]

Wrong:
$("#mqcontainer").each(function(){
$(this).html(
...
)};
)};
The code above can not be correct. Since there is only one div with the ID mqcontainer.
Try this:
$("#mqcontainer").html(
$("#mqcontainer").html().replace(/<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>/g, '[url=$1]Image[/url]')
);

<a style="text-decoration:none;" href="(.*?)"><img src=".*?" alt="Posted Image">\[br\]<small><\/small><\/a><small><a href=".*?" class="view_full">View Full Image<\/a><\/small>
The above should work.
I removed an extraneous ] that was after your image and before the escape [br].
Edit: And a note to add that looking at the revision history after seeing powtac's comments above this is in fact an error you introduced on editing in his suggestion.

jQuery what instead $(this).parent().children()

Just a quick example:
<p>
<span class="example"></span>
<input type="text" name="e_name" id="e_id />
</p>
<script type="text/javascript">
$('input').click(function(){
$(this).parent().children('span').text('Suprise!');
}
</script>
What can I use instead parent().children()?
I think it's a bit inelegant piece of code.
Is any function i.e : $(this).fun('span').text('just better'); ??

$(this).siblings('span').text('Suprise!');

$(this).siblings('span').text('Surprise!');
Would be the equivalent without traversing up the DOM and then back down (I mean, it still does it, but at least you're not doing it manually).

Slightly more elegant is .prev()
$(this).prev('span').text('Surprise!');
you can read more about it here: Prev
edit: read the markup backwards, prev is better, not next.

try this:
$(this).prev('span').text('Surprise!');

$("span.example",$(this).parent()).text('Suprise!');

Why Aptana is accusing an error in this code?

I copied this page's source in Aptana IDE for javascript. But, in the last lines:
<script language="JavaScript">
init();
</script>
</body>
</html>
it is showing at the init() line: syntax error, why? (when run, it works correctly)

There's a missing semicolon. Change
<input type="reset" onclick="lines=0;return true">
to
<input type="reset" onclick="lines=0;return true;">

Change it to
<script type="text/javascript">

I cannot reproduce this. Copy/pasting the code from that page into Aptana does not give me any errors. Make sure that a) you have the latest version of Aptana, and b) there are not any strange cop/paste artifacts in your code. Try pasting to notepad first and then from there to Aptana, to remove formatting information and see if it make a difference.

If you copy/pasted maybe the editor is with invalid characters, try checking for " or ' and replacing them with regular quotes and doboule quotes.
Copy Pasting source codes ofter cause this problem.