Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

marioeid's avatar

how to pass the csrf_token to my view using ajax jquery

the ajax function works but when i append i don't know how to pass the csrf_token to the jquery append function

 $('#post_create').on('click', function(e){
    
    //  var url=$(this).attr('action');
    //  var post=$(this).attr('method');
    e.preventDefault();
    //  var body=$('#body').val();
    //  var tilte=$('#title').val();
    $.ajax({
        // headers: {
        //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //   }
        //   ,        
    url:'/createpost',
    type:'POST',
    data:$(".postform").serialize(),
    dataType: 'JSON',
   success:function(data)
   {
     
      if(data.status == "success"){


      $('#posts').append('<li class="arrow_box col-md-10 col-lg-10 offset-lg-1"><p><span id="title">'+data.data.title+'</span><br/><span id="body">'+data.data.body+'</span>               <br/><div class="info"><p> <div id="funform"> <div>'+data.data.created_at+'</div><a  class="fa fa-trash post_delete" data-id="'+data.data.id+'" data-url="/deletepost/'+data.data.id+'"></a><a class="fa fa-thumbs-up post_like"></a>   <a class="fa fa-comment post_comment"></a> <a class="fa fa-edit post_edit" </a></a>  </div> </p>  </div></p></li>');
      
      $('.close').click();
      $( '.postform' ).each(function(){
        this.reset();
    });
    
    }
     }
   ,error:function(data)
   {
     $('#errors').show();
     $('#errors').html('');
       var errors=data.responseJSON;
       $.each(errors,function(v,k)
       
       {
        $('#errors').append(v+"<br/>");

       }
       );
   }
   
    })



    });

my view

<div class="container-fluid">
        <div class="page col-lg-12">
          
            <ul id="posts" class="row">
                 @foreach($posts as $post)
                    <li class="arrow_box col-md-10 col-lg-10 offset-lg-1">
                    <p><span class="username">{{$post->user->name}} </span> &nbsp<span id="title">{{$post->title}}</span>
                    
                    <br/>
               <span id="body">{{$post->body}}</span>
                                   <br/>
                    <div class="info">
                    <p> 
                   <div id="funform">
                    <div>{{$post->updated_at->format('d M Y - H:i:s')}}</div>
                  <a  class="fa fa-trash post_delete" data-token="{{ csrf_token() }}" data-id="{{$post->id}}" data-url="/deletepost/{{$post->id}}"></a>
                   <a class="fa fa-thumbs-up post_like"></a>
                   <a class="fa fa-comment post_comment"></a>
                   <a class="fa fa-edit post_edit" </a></a>
                   </div> 
                   </p>
                   </div>
                    
                    </p>
                    
                    </li>
                @endforeach
                
            </ul>
             <button class="btn mybtn right" data-toggle="modal" data-target="#exampleModalCenter">post</button>
 
            <!-- Button trigger modal -->

0 likes
7 replies
Palak27's avatar

@marioeid In your data you can pass csrf_token like this

"data": { _token: "{{csrf_token()}}" ,  postform : $(".postform").serialize()},
marioeid's avatar

@PALAK27 - i am not asking how to pass to the data i am asking in the post function i am showing a new post how to put it in the view like

$('#posts').append('<a data-token="{{csrf_token()}}"></a>');
Palak27's avatar

@marioeid

you can't pass like this

$('#posts').append('<a data-token="{{csrf_token()}}"></a>');

if you have used post method then make a from like

   $('#posts').append('<li class="arrow_box col-md-10 col-lg-10 offset-lg-1">
<p><span id="title">'+data.data.title+'</span><br/>
<span id="body">'+data.data.body+'</span><br/>
<div class="info">
    <p> 
        <div id="funform"> 
            <div>'+data.data.created_at+'</div>
         <from action = "/deletepost/'+data.data.id" method="post"> 
               {{ csrf_field() }}
            <a  class="fa fa-trash post_delete"></a>
         </from>
            <a class="fa fa-thumbs-up post_like"></a>   
            <a class="fa fa-comment post_comment"></a> 
            <a class="fa fa-edit post_edit" </a></a> 
         </div> 
    </p>  
</div>
</p>
</li>');
marioeid's avatar

csrf_field isn't working in jquery i tried that before

Palak27's avatar

@marioeid

istead of {{ csrf_field() }} in form

try this

<input type="hidden" name="_token" value="{{ csrf_token() }}">
mcstepp's avatar

You have the header commented out.

//headers: {
//     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
//   }
//   ,   

Was that not working before?

marioeid's avatar

@MCSTEPP - yes it wasn't but i solved the issue i don't even need to use form if am using ajax to create or delete

Please or to participate in this conversation.