Serialize input with html value using ajax request

Question

I used jquery.ajax post to send the data to the server using c# but it handles an error here's my code

$(function(){
  $('#frmSubmit').on('submit', function(e){
    e.preventDefault();
    var frm = $(this);
    
    $.ajax({
      url: frm.attr('action'),
      type: frm.attr('method'),
      data: frm.serialize(),
      dataType: 'JSON',
      success: function(){
        alert('success');
      },
      error: function(){
        alert('error');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="frmSubmit" method="post" action="/announcement/create">
  Title:<br/>
  <input type="text" id="title" name="title" /> <br/>
  Body:<br/>
  <textarea id="body" name="body"></textarea> <br/>
  
  <button type="submit">submit</button>
 </form>

My problem is when I input a html code on the textarea the result is error but when I input a normal text the result is okay, so my conclusion is that the serialized form won't accept any html code, I don't know why. please help me.

New Update Actually... I'll use this method in order for me to store html content using trix-editor (WYSIWYG).. here's the link but the problem is stated above... please help me to solve this guys...

Your response would be very much appreciated, thank you in advance

Answer 1

The problem is in your server side. If you use ASP.NET, it has built-in request validation that automatically helps protect against XSS and HTML injection attacks. Your html content is treated as that.

There is several option to allow html content in post content:

1. Decorate the property on your model class that requires HTML with the [AllowHtml] attribute.

   public class DummyData 
   {
       public string Title { get; set; }        
       [AllowHtml]
       public string Body { get; set; }
   }
   

2. Add [ValidateInput(false)] on your method that receive post data. Bellow is sample with ASP MVC controller:

   [HttpPost]
   [ValidateInput(false)]   
   public ActionResult SaveYourData(DummyData model)
   {
       ...
   }