Ajax 403 error

HI , sorry for english , in my form , i want populate a select by searching value inserting a substring ( with like select ),

This is Jquery code :

Code:

<script>

$( document ).ready(function() {
   var stato=$("#id_class_stato_agenda_id option:selected").val();
    


    $("#id_class_stato_agenda_id").change(function() {
     var stato=$("#id_class_stato_agenda_id option:selected").val();
        
   
      if(stato=='1' ||  stato=='2'){
                $("#id_class_clienti_id").val('');
     }    
        
        console.log(stato);
    });
       
       
       
   $("#ricerca_cliente").click(function(){
       
       var ragione_sociale_getted = $("#ragione_sociale").val();
       var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>';
       var csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';
       
       $.ajax({
           type: "POST",
           url: "<?=base_url()?>index.php/clienti/ricerca_clienti_select",
           data: {
               ragione_sociale:ragione_sociale_getted ,
               csrfName:csrfHash
           },
           dataType: "html",
           success: function(msg)
           {
             $("#id_class_id_cliente").html(msg);
           },
           error: function()
           {
             alert("Chiamata fallita, si prega di riprovare...");
           }
       });
   });

});
</script>


This is  the controller :

this is the  controller function :

PHP Code:

   public function ricerca_clienti_select() {
        
        $csrf =  $this->security->get_csrf_hash();
    
        $this->output->set_content_type('application/json')->set_output(json_encode(array( 'csrf' => $csrf)));
        
        if (!empty($this->input->post('ragione_sociale'))) {
            
            $ragione_sociale = $this->input->post('ragione_sociale');

            $lista = $this->clienti_model->recupera_by_name($ragione_sociale);

            foreach ($lista->result() as $row) {
                echo "<option value='" . $row->id_clienti . " '>";
                echo $row->ragione_sociale;
                echo "</option> ";
            }
        }
        
    } 


This is error :

jquery-3.2.1.js:9566 POST https://www.mysite.it/gest/index.php/cli...nti_select 403 (Forbidden)
 XHR failed loading: POST "https://www.mysite.it/gest/index.php/clienti/ricerca_clienti_select".

The sistem work if i set  


$config['csrf_protection'] = FALSE;


How can i solve ?

This has been asked many times. On the forum search there are lots of answers to this, I just searched 'ajax' and here are some of the many results:

https://forum.codeigniter.com/thread-683...#pid344934
https://forum.codeigniter.com/thread-685...#pid345687
https://forum.codeigniter.com/thread-686...#pid346124
https://forum.codeigniter.com/thread-688...#pid346964

Basically, when you submit your ajax post request you have to include the CSRF name => token pair too. When you do this, you then need to refresh the new current token either by updating a field somewhere on your page (which your js will read to get it when it is called) or return the new token in your return data, and update the CSRF field in your form.
When you get the hang of it, it is surprisingly straight forward, although as with all things ajax, depending on your usage, there might be other issues such as multiple concurrent requests etc.

Hope that helps,

Paul.

PS I would advise leaving CSRF on. You can disable CSRF for a certain url using the array in the config file, but I only do this if the page is already behind a login authorisation of some sort like for site admins, and your ajax controller checks that the user is authorised. I would not do that though for public users, only trusted site admins.