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;
});
    });

Check [here](https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request). — Tpojka, Apr 16 '20 at 23:33
Does this answer your question? [Laravel csrf token mismatch for ajax POST Request](https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request) — Nilanka Manoj, Apr 17 '20 at 02:18

Aria Shahdadi · Answer 1 · 2020-04-17T00:03:03.323

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

already i have the serialization, the problem is in token ( laravel ) — , Apr 16 '20 at 23:18
i update my answer i forgot to import jquery in example sorry. its simple just add to your html head and use ajaxSetup befor actual sending ajax request — Aria Shahdadi, Apr 17 '20 at 00:05
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 — , Apr 17 '20 at 00:16
please check again, return false doesn't block my form redirection, it's like i'm not using ajax or there is an issue — , Apr 17 '20 at 00:18
that is because probably you set submit button inside the form tag or your button type is submit — Aria Shahdadi, Apr 17 '20 at 00:21
yes but when you put it inside form tag html do the redirection or if you are going to set it inside the form tag set the button type to button — Aria Shahdadi, Apr 17 '20 at 00:26

Laravel 419 Error using Ajax and formData,

1 Answers1