Submitting form via ajax in Laravel 5.1

Question

I'm struggling to get this form to submit using ajax and Laraval 5.1. I've been searching and trying for a few days with very little success. Here is as close as I can can get currently. Submitting the form results in a successful 200 POST status, but the console comes up empty? The database is supposed to be updated, but is not, so I have to assume that the data is not being sent from the form properly. The jquery version used here is 2.1.4. The form is located within a modal popup, incase that might have any effect.

Here is my code:

Form:

Route:

Route::post('admin/settings/vendors/add-vendor', 'JsonController@addVendor');

Controller Method:

    public function addVendor(Request $request) 
{

    // validate new vendor form
    $this->validate($request, [
        'vendor_name' => 'required|min:2|max:255',
        'vendor_phone' => 'phone:AUTO,US,CA',
        'vendor_email' => 'email|max:255',
        'address_1' => 'max:255',
        'address_2' => 'max:255',
        'city' => 'max:255',
        'state_region' => 'max:255',
        'country' => 'max:255',
        'postal_code' => 'max:255'
    ]);

    // if validation passed, store new vendor in database
    $vendor = new Vendor;
    $vendor->shop_id = $request->shop_id;
    $vendor->vendor_name = $request->vendor_name;
    $vendor->vendor_phone = $request->vendor_phone;
    $vendor->vendor_email = $request->vendor_email;
    $vendor->address_1 = $request->address_1;        
    $vendor->address_2 = $request->address_2;
    $vendor->city = $request->city;
    $vendor->state_region = $request->state_region;
    $vendor->country = $request->country;
    $vendor->postal_code = $request->postal_code;        
    $vendor->save();

    $data['vendor_id'] = $vendor->id;
    $data['vendor_name'] = $vendor->vendor_name;

    // return data
    return response()->json($data);

}

Javascript:

    // add-vendor.js
$(document).ready(function() {

    // process the form
 $('#addVendorForm').submit(function(e) {
            $.ajax({
                type: 'POST',
                url: '../../admin/settings/vendors/add-vendor/',
                data: $('#addVendorForm').serialize(),
                success : function(data){
                    console.log(data);
                },
                error: function(errors){
                    console.log(errors);
                }
            });

            e.preventDefault();
        });            

});

Thank you so much for your help. This is my first attempt at submitting a form without a page reload.

Cheers.

toolbar2000 · Accepted Answer

I'm regretful to admit that I spent days thinking that the problem must have been with the ajax request, but it turns out to have been a routing issue. I'll post my solution here in hopes of preventing another newbie like myself from making the same mistake.

I set up a bunch of routes for creating, showing, editing, updating etc. and placed the route to the ajax form handler last.

// vendors
Route::get('admin/settings/vendors', 'Admin\VendorController@index');
Route::get('admin/settings/vendors/create', 'Admin\VendorController@create');
Route::post('admin/settings/vendors', 'Admin\VendorController@store');
Route::get('admin/settings/vendors/{id}', 'Admin\VendorController@show');
Route::post('admin/settings/vendors/{id}', 'Admin\VendorController@update');
Route::get('admin/settings/vendors/{id}/edit', 'Admin\VendorController@edit');
Route::post('admin/settings/vendors/add-vendor', 'JsonController@addVendor');

The router obviously checks for matching routes sequentially until it finds one, so "add-vendor" at the end of "admin/settings/vendor/add-vendor" was being caught as a parameter in "admin/settings/vendor/{id}" and the data was posted to the wrong controller method.

Simply renaming the route so there could be no confusion between it and the other controller was the easy answer!

Submitting form via ajax in Laravel 5.1

Answers (1)

Related Questions