Can't get value of input field when using ajax FormData() in Laravel

Question

$(document).on('submit', '#color_changer_form', function(e) {
  e.preventDefault();
  var colorCode = $('#color_code').val();
  var formData = new FormData(this)[0];
  $.ajax({
    headers: {
      'X-CSRF-Token': "{{csrf_token()}}"
    },
    type: "POST",
    url: "{{route('color.store')}}",
    data: formData,
    async: false,
    success: function(data) {
      console.log(data)
    },
    cache: false,
    contentType: false,
    processData: false
  });
});

<form action="" method="POST" id="color_changer_form">
  <input type="text" id="color_code" name="color_code">
  <button type="submit" id="color_submit" class="btn btn-success">Save Change</button>
</form>

Controller snippet:

public function store(Request $request){
    return response()->json($request->all());
}

When I try to get the whole form data using the jQuery AJAX FormData() method, I get an empty array.

In need to use this FormData() because in the near future I have to upload an image using the form data.

charlietfl · Accepted Answer · 2017-11-18 17:40:52Z

2

Send the whole formData object

Change:

 var formData = new FormData(this)[0];

To

 var formData = new FormData(this);

If there are no files involved it is simple to use serialize() also

$.ajax({
  headers: {
    'X-CSRF-Token': "{{csrf_token()}}"
  },
  type: "POST",
  url: "{{route('color.store')}}",
  data: $(this).serialize(),
  success: function(data) {
    console.log(data)
  }

});

Never use async:false. it is a terrible practice and is deprecated

edited Nov 18, 2017 at 17:40

answered Nov 18, 2017 at 17:37

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

Sharifur Robin Over a year ago

thanks for you great support. Please Clear me one thing. if here i upload a file or then how can i get the all the file value with file object, then what should i use var formData = new FormData(this)[0]; or var formData = new FormData(this);

charlietfl Over a year ago

Why do you keep wanting to add the [0]?? Send the whole object! If there are file inputs it will include files also

Sharifur Robin Over a year ago

yes . if The Html Like This <form action="" method="POST" id="color_changer_form"> <input type="text" id="color_code" name="color_code"> <input type="file" id="file" name="image"> <button type="submit" id="color_submit" class="btn btn-success">Save Change</button> </form>

Collectives™ on Stack Overflow

Can't get value of input field when using ajax FormData() in Laravel

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related