CODEWITHSUNDEEP
jsonjqueryforms
Ray
Ray

Reputation: 12441

My jQuery enabled form does not submit when I typed in html tags in the textarea?

I have simple form with a textarea and a button, and I submit the form with jQuery .post() function and in 'json' format.

My form submits correctly until I wrote some html tags like bold etc. in the textarea, then the form dose NOT sumbit to server anymore.

I don't know what is wrong with what I'm doing and how do I get html segments submitted using jQuery in this case?

Edit: here is the form,

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
 <input name="submit" type="button" id="submit" tabindex="5" value="Submit Comment" onclick='postComment()'/>

here is the js

function postComment() {
    var comment = {};
    comment.Body = $("#comment").val();

    $.post("Comments", comment, parseComment, 'json');
};
function parseComment(data) {
    $("#commentList").html(data.Body);
};

Upvotes: 0

Views: 171

Answers (2)

Muneer
Muneer

Reputation: 7564

If you are entering new lines in TextArea, it will automatically create New Line character "\n". These character used to make problem in Javascript. Try removing those characters.

var strMultiLineText = 
    "Karen didn't know how to feel any more. She had never liked girls\n" +
    "\"that way,\" but she couldn't ignore the emotion, that surge of \n" +
    "adrenaline that coursed through her body at the sight of Kimmie's\n" +
    "wet, naked, voluptuous figure in the locker room showers.";
// Strip out all line breaks.

var strSingleLineText = strMultiLineText.replace(
    // Replace out the new line character.
    new RegExp( "\\n", "g" ), 

    // Put in ... so we can see a visual representation of where
    // the new line characters were replaced out.
    " ... " 
    );

// Alert the new single-line text value.

You can check this blog for more details. http://www.bennadel.com/blog/161-Ask-Ben-Javascript-Replace-And-Multiple-Lines-Line-Breaks.htm.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074335

Your posted code should work (and does work for me) provided you're handling the comment text correctly at the server. It doesn't do quite what it sounded like it did from your question: It sends a conventional request (not in JSON format) and returns a JSON-formatted resopnse.

If I have a very simple server-side script that receives the "Body" parameter and returns a JSON-formatted response:

{"Body": "This is the <strong>comment</strong>"}

...your code replaces the commentList element's contents with that HTML.

Here's a JSBin that simulates what you're doing, although of course with a static comment (since JSBin will respond to Ajax requests, but only with static content):

http://jsbin.com/usehi3

When yhou click the "Submit Comment" button, that uses your code but POSTing to http://jsbin.com/olazo4, which is just a static JSON-formatted comment:

{"Body": "This is <strong>boldfaced</strong>, this is <em>italics</em>"}

I think the problem must lie in the server-side processing.

Upvotes: 1

Related Questions