unprocessable entity error (ajax) (laravel 5.2)

Question

I am working on laravel 5.2. I want to edit my group name using ajax request but i am getting an error:"Unprocessable entity error". I am able to fetch the group name using jquery in my textarea but when i click on the save button, i am getting an error each time which is shown below:

My controller:

     public function groupEditGroup(Request $request){
     $this->validate($request,[
     'groupname' => 'required|min:5'
     ]);
     $group=Grouptable::find($request['postId']);
     $group->name=$request['groupname'];
     $group->update();
     return response()->json(['new_name' => $group->name],200);
     }

My view:

       <section class="col-md-offset-1 col-md-9 special" 
       data-groupid="{{ $group->id }}">
       <a id="hash" href="" style="font-size:20px;text-decoration:none;">
       {{$group->name}}</a>
       <button type="button" style="margin-top:5px;" class="btn btn-warning
       dropdown-toggle" data-toggle="dropdown"><span id="removesign"
       class="glyphicon glyphicon-chevron-down"></span></button>

       <ul class="dropdown-menu" role="menu">
       <li role="presentation"><a id="edit" style="font-weight:bold; 
       color:black;"role="menuitem" tabindex="-1">Edit Group Name</a></li>
       <li role="presentation"><a style="font-weight:bold; color:black;"
       role="menuitem" tabindex="-1" href="{{ URL('/groups/'.$group->id)
       }}">Leave This Group</a></li>

       </ul>


      <!-- Modal -->
      <div id="edit-modal" class="modal fade" role="dialog">
      <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;
      </button>
      <h4 class="modal-title" style="font-weight:bold; color:black;">
      Edit Group Name</h4>
      </div>
      <div class="modal-body">
      <form>
      <div class="form-group">
      <textarea class="form-control" name="edit-group" id="edit-group">
      </textarea>
      </form>
      </div>
           <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-lg"
            data-dismiss="modal" id="modal-save">Save</button>
            </div>
             </div>

      </div>
      </div>
      </section>

      <script>
      var token='{{ Session::token() }}';
      var url='{{ route('edit') }}';
      </script>

My Javascript:

      var groupId= 0;
      var postBodyElement=null;
      $('.row').find('.special').find('.dropdown-
      menu').find('li').find('#edit').on('click', function(event){
      event.preventDefault();
      postBodyElement=event.target.parentNode.parentNode.
      parentNode.childNodes[1];
      var groupName=postBodyElement.textContent;
      groupId=event.target.parentNode.parentNode.parentNode
     .dataset['groupid'];
      $('#edit-group').val(groupName);

      $('#edit-modal').modal();
      });

      $(function () {
      $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
       });
       });

        $('#modal-save').on('click',function(){
        $.ajax({
        method:'POST',
        url:url,
        data:{ body: $('#edit-group').val(), groupId: groupId , 
       _token: token }

        })
        .done(function(msg){
         $(postBodyElement).text(msg['new_name']);
         $('#edit-modal').modal('hide');
         });

         });

Answer 1

$.ajax({
        method:'POST',
        url:url, //Changed the 'body' index to 'groupname' in data 
        data:{ groupname: $('#edit-group').val(), groupId: groupId , 
       _token: token }

        })
        .done(function(msg){
         $(postBodyElement).text(msg['new_name']);
         $('#edit-modal').modal('hide');
         })
         .fail(function(msg) { 
          console.log(msg); 
         )};