Laravel 419 Error using Ajax and formData,

Question

My form data doesn't send any thing i don't know why i tried to debug line by line and i found the problem in data: formData variabe, can someone help me :

also i can't stop redirection using return false

$(function(){
// When Form #xhr is Submited
$('#xhr').submit(function(){
    var selectedFile = null;
    var data = new FormData();

    //if(selectedFile !== null)
    data.append('image', selectedFile, selectedFile.name)

    $($(form).serializeArray()).each(function(i, field){ 
        data.append(field.name, field.value);
    });


    $.ajax({
        url: $(form).attr('action'),
        data: data,
        dataType: 'JSON',
        cache: false,
        contentType: false, 
        processData: false,
        method: 'POST',
        success: function(data){
            alert(data.success);
        }
    });
    return false;
});
    });

Does this answer your question? Laravel csrf token mismatch for ajax POST Request — Nilanka Manoj
– Nilanka Manoj, Commented Apr 17, 2020 at 2:18

Aria Shahdadi · Accepted Answer · 2020-04-17 00:03:03Z

1

use serialize for collecting data

var formData = $('form').serializeArray(),


$.ajax({
    url: $("#myform").attr('action'),
    type: "POST",
    data: formData,
    contentType: "application/json",
    dataType: "json",
    success: function(){
        alert("yes");
    }
});

for token add this in your html

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

then before sending ajax request set this

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

$.ajax({
    url: $("#myform").attr('action'),
    type: "POST",
    data: formData,
    contentType: "application/json",
    dataType: "json",
    success: function(){
        alert("yes");
    }
});

example:

file:index.blade.php

<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>Document</title>
</head>
<body>
    <form action="" id="myform">
        <input type="text" name="first" id="first">
        <input type="text" name="second" id="second">
        <input type="text" name="third" id="third">
        <button type="button" id="mysubmitbutton">submit</button>
    </form>
    <script>
       $("body").on("click", "#mysubmitbutton", function () {
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf- token"]').attr('content')          }
        });


       $.ajax({
           type: "POST",
           url: "{{ route('myRouteName') }}",
           data: {
                    'first': $("#first").val(),
                    'second': $("#second").val(),
                    'third': $("#third").val()
                 },
           success: function (msg) {
               alert('wooow');
           }
        });
    });
     </script>
     </body>
 </html>

in this simple example i set csrf token in header then when user click on button i collect data and send ajax request

edited Apr 17, 2020 at 0:03

answered Apr 16, 2020 at 23:14

Aria Shahdadi

3111 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user13283659 Over a year ago

already i have the serialization, the problem is in token ( laravel )

Aria Shahdadi Over a year ago

i update my answer i forgot to import jquery in example sorry. its simple just add <meta name="csrf-token" content="{{ csrf_token() }}"> to your html head and use ajaxSetup befor actual sending ajax request

user13283659 Over a year ago

Thank you i fixed the issue but i don't know why i can't stop my form redirection since i have used return false; please check i will update my question

user13283659 Over a year ago

please check again, return false doesn't block my form redirection, it's like i'm not using ajax or there is an issue

Aria Shahdadi Over a year ago

that is because probably you set submit button inside the form tag or your button type is submit

|

Collectives™ on Stack Overflow

Laravel 419 Error using Ajax and formData,

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related