jQuery textbox and html

Question

Hi, I am manipulating some data in ms ajax and return a string which I insert into a textbox by using jQuery.val(). Unfortunately the textbox doesn't intrepret either
or \n, so how can I make it render the text inside textbox so it still looks nice?

Update (by request): I use something similar to this:

var sendEmailText = Hi, you found these items<ul><li>Car1</li><li>car2</li></ul><br><br/>Bye!      
jQuery('.CssReceiverMessage').val(sendEmailText);

And basically it just shows the code with the html tags, instead of interpreting it.

Answer 1

It's not possible to use HTML in a text box (<input> element)

Answer 2

Instead of using a TextBox use a span or div. Create a Span on the page.

<span id="ReceiverMessage"></span>

Then in your jQuery code set its html() to the sendEmailText:

jQuery("#ReceiverMessage").html(sendEmailText);

Answer 3

Presumably you're trying to send styled email and the text box will contain the text of the mail. I suggest that you do two things -- first use a DIV to display the text to the user. You can style it so that it looks like a text box/area if you want with borders, etc. Then have a hidden input that actually contains the data that will be sent back to the server. This way your display works the way you want, but the data is passed back intact for the email to be sent. Alternatively you could let the server format the email and pass the data back as JSON or some other format that can be interpreted by the server.

var sendEmailText = "Hi, you found these items<ul><li>Car1</li><li>car2</li></ul><br><br/>Bye!"     
jQuery('#receiverMessage').val(sendEmailText);
jQuery('.receiverDisplay').html(sendEmailText);

<div style="border: 1px solid #0000ff;" class="receiverDisplay">
</div>
<input type="hidden" id="receiverMessage" name="recevierMessage" />

Edit: If the user needs to edit the message, as indicated by your comments to another answer, then consider using a markdown editor such as WMD (used on SO).

Answer 4

Have you considered using FCKEditor of TinyMCE? Both replace a standard textbox and give you a rich HTML editior.