Issue with AJAX form submission using jQuery

@kevinbui the route is not being triggered therefore the

fulfillment function is not running

@Danny971 What error message do you see?

@kevinbui the error message i get is on the consol log which is Form submission failed dettaway

Form submission failed dettaway: Objectabort: ƒ (e)always: ƒ ()catch: ƒ (e)done: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (e)overrideMimeType: ƒ (e)pipe: ƒ ()progress: ƒ ()promise: ƒ (e)readyState: 4responseJSON: {message: 'CSRF token mismatch.', exception: 'Symfony\Component\HttpKernel\Exception\HttpException', file: 'C:\xampp\htdocs\pos_cfr\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php', line: 396, trace: Array(40)}responseText: "{\n "message": "CSRF token mismatch.",\n setRequestHeader: ƒ (e,t)state: ƒ ()status: 419statusCode: ƒ (e)statusText: "unknown status"then: ƒ (t,n,r)[[Prototype]]: Object error @ profile?family_id=87:1631

@Danny971 The error is CSRF token mismatch then. You might want to have a look at the docs. Do you have that meta tag in your html?

@kevinbui so this in incorrect

// Perform the AJAX request $.ajax({ url: '/fulfillment', type: 'POST', data: formData, dataType: 'json', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

@Danny971 I believe that line is correct. Do you have the following line in your blade file/html?

<meta name="csrf-token" content="{{ csrf_token() }}">

@kevinbui yes i do . I just updated my javascript code

function submitForm() {
  $(document).ready(function() {
    $('#submitButton').click(function(e) {
      e.preventDefault();
   


      // Get the form values
      const decision = $('#decisionDropdown').val();
      const reason = $('#val-skill option:selected').text(); // Retrieve the selected option's reason text
      const caseId = $(this).data('case-id'); 
      // Perform actions with the decision and reason values
      //alert('Decision: ' + decision + '\nReason: ' + reason);

      // Prepare the data to be sent
      const formData = {
        decision: decision,
        reason: reason,
        caseID: caseId
      };

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

    
 
      // Perform the AJAX request
      $.ajax({
        url: '/fulfillment',
        type: 'POST',
        data: formData,
        dataType: 'json',
        headers:headers,

        success: function(response) {
          console.log('Form submission successful:', response);
        },
        error: function(error) {
          console.error('Form submission failed dettaway:', error);
         
        }
      });

    });
  });
}

and get a new error 

profile?family_id=87:1636 Form submission failed dettaway: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}abort: ƒ (e)always: ƒ ()catch: ƒ (e)done: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (e)overrideMimeType: ƒ (e)pipe: ƒ ()progress: ƒ ()promise: ƒ (e)readyState: 4responseText: "hello world app <script> Sfdump = window.Sfdump |setRequestHeader: ƒ (e,t)state: ƒ ()status: 500statusCode: ƒ (e)statusText: "Internal Server Error"then: ƒ (t,n,r)[[Prototype]]: Object

the hello word app is in the controller. it a basic test .    echo"hello world app ";

it might be an internal server error.  there might be an issue on the server side while executing the fulfillment logic in the CaseController

@Danny971 Great! We have solved the CSRF token issue. Now you see this new error message because of the dd method in you controller action. Pls remove the following line and return some real data:

dd($caseID);

@kevinbui

profile?family_id=87:1636 Form submission failed dettaway: 
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort
: 
ƒ (e)
always
: 
ƒ ()
catch
: 
ƒ (e)
done
: 
ƒ ()
fail
: 
ƒ ()
getAllResponseHeaders
: 
ƒ ()
getResponseHeader
: 
ƒ (e)
overrideMimeType
: 
ƒ (e)
pipe
: 
ƒ ()
progress
: 
ƒ ()
promise
: 
ƒ (e)
readyState
: 
4
responseText
: 
"hello world app "
setRequestHeader
: 
ƒ (e,t)
state
: 
ƒ ()
status
: 
200
statusCode
: 
ƒ (e)
statusText
: 
"OK"
then
: 
ƒ (t,n,r)
[[Prototype]]
: 
Object



i also removed the dd();

@Danny971

Wrap this in three backticks to be easily read by anyone.

```

// paste here

```

@NoLAstNamE done that

@Danny971 Pls remove the echo and dd lines, return the data that you want.

@kevinbui I did and it worked i got the following response in the browser console after removing the dd(); and echo statement . I added return 0 and got the following

submitForm called profile?family_id=87:1632 Form submission successful: 0

@Danny971 Open your browser's dev tools. Goto the Network tab. Submit your form. Click the endpoint of that form from the Network tab logs.

And paste the response here.

@NoLAstNamE

exception
: 
"ErrorException"
file
: 
"C:\xampp\htdocs\pos_cfr\app\Http\Controllers\CaseController.php"
line
: 
34
message
: 
"Undefined variable $fulfillmentCase "
trace
: 
[{,…}, {file: "C:\xampp\htdocs\pos_cfr\app\Http\Controllers\CaseController.php", line: 34,…},…]

@Danny971 If you know how to read (I know you can). Go to your controller and fix that undefined variable.

@NoLAstNamE I did already . This was causing the error

$fulfillmentCase -> save(); and then I fixed it to this

$fulfillmentCase->save();