CODEWITHSUNDEEP
ajaxlaravel
Supercoder54551
Supercoder54551

Reputation: 49

Trying to submit my laravel form without the page refreshing

I am trying to submit my form without having to refresh the page. I haven't been successful I keep getting error message in the console log that the serever is saying the page is wrong.I don't know what I'm doing wrong. Can someone help me please? I am using laravel,ajax. Here is my code. Thanks in advance

   //Ajax

$('.formform' ).submit(
    function( e ) {
        $.ajax( {
            url: '{{ url('profileupdate') }}',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
            }
        } );
        e.preventDefault();
    } 
);


             //The form
    {!!Form::open(['url'=>['profileupdate',Auth::user()->id],'method'=>'POST','files'=>true,'class'=>'formform formform2','enctype' => 'multipart/form-data']) !!}

                    <div style="position:relative; left:.5em; font-size:1.3em;">
ADD YOUR VIDEO!<br>

                        </div>
                        <br>
                    {{Form::file('video',array('id'=>'file','class'=>'thefile'))}}

                    <label for="file"  class="btn btn-default" style="background:none;">Choose a file</label> <span class="tt"></span>








                    {{Form::text('Company','',array('placeholder'=>'Company Name','class'=>'form-control'))}}

{{Form::text('city','',array('placeholder'=>'City and State','class'=>'form-control', 'size'=>'35px','height'=>'15px','id'=>'location-input','autocomplete'=>'off'))}}

{{Form::text('zip_code','',array('placeholder'=>'Zip Code','class'=>'form-control'))}}

 {{Form::text('Phone_Number','',array('placeholder'=>'Phone Number','class'=>'form-control'))}}



{{Form::submit('Submit', array('class'=>'btn btn-warning form-control','id'=>'submitty profile1_submit','style'=>'border:none; margin-top:3%; margin-bottom:5%;', 'data-toggle'=>"modal",  'data-target'=>"#profile_modal"))}}
{!!Form::close() !!}

   //Here is the route

   Route::post('profileupdate/{id}','Profile1Controller@update');

Upvotes: 0

Views: 10058

Answers (3)

Abderrahim Soubai-Elidrisi
Abderrahim Soubai-Elidrisi

Reputation: 5202

You miss the parameter id 'profileupdate/{id}' Change this :

url: '{{ url('profileupdate') }}',

With 

 url: {!! route('profileupdate', ['id' => Auth::user()->id  ]) !!}

and don't forget to add the token for csrf in data (javascript part)

    "_token": $('#token').val()

Upvotes: 2

Supercoder54551
Supercoder54551

Reputation: 49

I got it to work thanks to Abderrahim Soubai Elidrissi and Dearwolves(Thanks guys)

This is what worked for me 

 $.ajaxSetup({

        headers: {

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

        }

    });


$('.formform' ).submit(
    function( e ) {
        $.ajax( {
            url: '{!! url('profileupdate', ['id' => Auth::user()->id  ]) !!}',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                alert('form submitted');
            }
        } );
        e.preventDefault();
    } 
);

Upvotes: 0

Dearwolves
Dearwolves

Reputation: 453

Update needs and token if it is post. I also think the way you call the route is wrong. What I did on my code here is I call a function with the id as parameter and call it using a button:

<button type="button" onclick = "submitThisForm({{Auth::user()->id}})"> Submit</button>

then the script function contains the ajax post. I use replace to add the id to the route.

 function submitThisForm(id){
    url= '{{route('upload-employee-request',[":emp"])}}';
    url= url.replace(':emp', id);

}

then finally

function submitThisForm(id){
        url= '{{route('upload-employee-request',[":emp"])}}';
        url= url.replace(':emp', id);

        $.ajax( {
            url: url,
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
            }
        } );
        e.preventDefault();


    }

Hope it helps!

Upvotes: 1

Related Questions