How to send data from view to controller laravel with ajax?

Question

I have problem to send data from view to controller laravel version 7 i send data from form and ul li i have array data in javascript

my html code is :

I have problem to send data from view to controller laravel version 7 i send data from form and ul li i have array data in javascript

<ul name="ali" id="singleFieldTags" class="tagit ui-widget ui-widget-content ui-corner-all">
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">reza</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
    </li>
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">ali</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
    </li>
    <li class="tagit-new">
        <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">
    </li>
</ul>


     <form id="form" method="post"  action="/save_new" enctype="multipart/form-data">
        @csrf

        <div class="form-group">
            <label for="title">title</label>
            <input type="text"  name="title"  class="form-control">
        </div>

        <div class="form-group">
            <label for="choose-file" class="custom-file-upload" id="choose-file-label">
                Click Here to upload image

            </label>
            <br/>
            <br/>
            <label >no image selected !</label>
            <input name="uploadDocument" type="file" id="choose-file"
                   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
        </div>

        <div class="form-group">
            <label for="title">Description</label>
            <textarea  name="meta_description"  class="form-control"></textarea>
        </div>

        <div class="form-group">
            <label >keywords</label>
            <input name="tags" id="mySingleField" value="reza,ali" type="hidden" disabled="true">
            <ul name="ali" id="singleFieldTags"></ul>
        </div>

        <button  type="submit"  onclick="myF()" class="btn btn-success pull-left"> save</button>



    </form>

in my javascript

 <Script type="text/javascript">
  function myF() {
        var data2 = [];
        var inputs = $(".tagit-choice");

        for (var i = 0; i < inputs.length; i++) {
            data2[i] = $(inputs[i]).text();
        }

           $.ajax({
            url:'/save_new',
            type: 'POST',
            dataType:'json',
            // data: JSON.stringify(data2),
            data: JSON.stringify(data2),
            contentType: 'application/json; charset=utf-8',
                    success: function( data ){
                        console.log('ok');
                        console.log(data);
                    },
                    error: function (xhr, b, c) {
                        console.log('error');
                        console.log("xhr=" + xhr + " b=" + b + " c=" + c);
                    }
        });
    }

when i send data from ajax i have error in console

error reza:263:37
xhr=[object Object] b=error c=

but in Request JSON i see

0   "reza×"
1   "ali×"

Please help me Thanks

my controller is :

    public function save_new(Request $request){
//        dd($request->all());

dd($request->getContent());

}

my route is :

Route::POST('/save_new','Backend\AdminPostController@save_new')->name('save_new');

edit:

my problem is solved thans you all

            var fd = new FormData();
        var file = $("#form input[name=uploadDocument]")[0].files;
        fd.append('file', file[0]);
        fd.append('title', $("#form input[name=title]").val());
        fd.append('description', $("#form textarea[name=meta_description]").val());
        fd.append('tags', JSON.stringify(data2));

        $.ajax({
            type: 'post',
            url: '/ok2',
            contentType: false,
            processData: false,
            data: fd,
            success: function(response) {
                
            },
            error: function  (response) {},
        });

In your browser developer tools, switch to the network tab and post what error are you getting from the backend ,when you send this request. — Raja
– Raja, Commented Dec 14, 2020 at 11:05
I think an error has occurred on the backend side. You should check again. If possible, could you share your controller? — Thân LƯƠNG Đình
– Thân LƯƠNG Đình, Commented Dec 14, 2020 at 13:22

Ruzaik Nazeer · Accepted Answer · 2020-12-15 09:19:33Z

1

I'm not sure about your work but this is one of the basic method to send data via jquery make sure to put ajaxSetup in document.ready function

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

$('#form').on('submit',function(){
    $.ajax({
    type:'post',
    url:$("#form").attr('action'),
    data:$("#form").serializeArray(),
    success:function(data){
        //response
        console.log(data);
      }
  });
});

edited Dec 15, 2020 at 9:19

answered Dec 14, 2020 at 11:48

Ruzaik Nazeer

4742 silver badges12 bronze badges

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

6 Comments

peyman Over a year ago

i am try your code but i recreceived error in console again! of course i add this code after success error: function (xhr, b, c) { console.log('error'); console.log("xhr=" + xhr + " b=" + b + " c=" + c); }

Ruzaik Nazeer Over a year ago

can you try that with using get type if it was successful the issue is related to csrf token then I can provide you with the code for it

Ruzaik Nazeer Over a year ago

I've edited my code put ajax setup inside the document.ready function and try

peyman Over a year ago

i put ajax setup in my code but i have error :( i dont know whats my problem

peyman Over a year ago

i see this error in the view source <title>400 Bad Request</title> <h1>Bad Request</h1> <p>Your browser sent a request that this server could not understand.<br />

|

Collectives™ on Stack Overflow

How to send data from view to controller laravel with ajax?

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