Passing form data with jQuery to Laravel as an array

Question

I have a Bootstrap 4 Modal with a form in it's body. It has one input type text and an input type file which can also upload multiple files. How can I get the text and the images and send them to my back-end with AJAX?

My HTML markup:

<div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title">Update Post</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- Modal body -->
              <div class="modal-body">
                <form class="updateForm">
                    <input type="text" class="form-control textt" name="text">


                    <label class="float-left m-2" style="padding: 4px; background-color: white;cursor: pointer;font-weight: 600;border-radius: 10px; border: none; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);">
                        ADD PICTURES 
                        <span>
                            <img src="http://www.transparentpng.com/thumb/logo-instagram/SKq9yH-black-and-white-instagram-logo-png.png" style="width: 25px; height: 25px;">
                        </span>
                        <input type="file" id="file-input" name="images[]" style="display: none;" class="inp" multiple >

                        <div id="preview"></div>

                    </label>

                    <button class="btn btn-warning btn-block updatee">UPDATE</button>

                </form>
              </div>

            </div>
          </div>
        </div>

I have tried to store my data in an object like this:

$('.updateForm').submit(function(e){

    e.preventDefault();

       var values = {};

    $.each($('.updateForm').serializeArray(), function(i, field) {

        values[field.name] = field.value;

    });
});

But it only gives me an object with the text.

do you know how to use ajax?

Jovs
– Jovs

2019-07-03 08:25:35 +00:00
Commented Jul 3, 2019 at 8:25 — Jovs
– Jovs, Commented Jul 3, 2019 at 8:25
Yes I can do the AJAX call

Grigory Volkov
– Grigory Volkov

2019-07-03 08:26:16 +00:00
Commented Jul 3, 2019 at 8:26 — Grigory Volkov
– Grigory Volkov, Commented Jul 3, 2019 at 8:26

Amal S R · Accepted Answer · 2019-07-03 09:09:19Z

1

var form_data = new FormData($('#ur_form')[0]);
            $.ajax({
                method: "POST",
                url: "post-url",
                data: form_data,
                cache : false,
                contentType: false,
                processData: false,
                success: function (result) {
                    //success
                }
            });

Try this method. Dont forgot to add csrf field in form

edited Jul 3, 2019 at 9:09

answered Jul 3, 2019 at 8:31

Amal S R

9408 silver badges25 bronze badges

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

6 Comments

Grigory Volkov Over a year ago

Can you also please tell me how I can take the data from Laravel. I try to do $request->input("form_data") and $request->file("form_data") but both return null.

Amal S R Over a year ago

you can get it by using field name. ex : $request->input('first_name'); or request->file('image');

Grigory Volkov Over a year ago

I can get the text and print it in success but when I do $request->file('image') it returns this link

Amal S R Over a year ago

Ith is the uploaded file. You can use a foreach function and save these files in folders.

Amal S R Over a year ago

It is in array format. you can use foreach( $request->file('image') as $image) { //upload image code }

|

Collectives™ on Stack Overflow

Passing form data with jQuery to Laravel as an array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related