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:
<form id="addVendorForm" class="form-horizontal" method="POST"
action="{{URL::to('admin/settings/vendors/add-vendor')}}">
<!-- Hidden input fields -->
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="shop_id" value="{{$data['shop_id']}}">
<!-- Vendor Name -->
<div class="form-group has-feedback">
<label for="vendor_name" class="col-sm-3 control-label">Vendor</label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="vendor_name" id="vendor_name"
placeholder="Vendor name"
required
value="{{ old('vendor_name') }}">
</div>
</div><!-- /.form-group -->
<!-- Vendor Phone -->
<div class="form-group has-feedback">
<label for="vendor_phone" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="tel" class="form-control"
name="vendor_phone" id="vendor_phone"
placeholder="Phone"
value="{{ old('vendor_phone') }}">
</div>
</div><!-- /.form-group -->
<!-- Vendor Email -->
<div class="form-group has-feedback">
<label for="vendor_email" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="email" class="form-control"
name="vendor_email" id="vendor_email"
placeholder="Email"
value="{{ old('vendor_email') }}">
</div>
</div><!-- /.form-group -->
<!-- Address -->
<div class="form-group has-feedback">
<label for="address_1" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="address_1" id="address_1"
placeholder="Street address"
value="{{ old('address_1') }}">
</div>
</div><!-- /.form-group -->
<div class="form-group has-feedback">
<label for="address_2" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="address_2" id="address_2"
placeholder="Apartment, suite, unit, building, floor, etc."
value="{{ old('address_2') }}">
</div>
</div><!-- /.form-group -->
<!-- City -->
<div class="form-group has-feedback">
<label for="city" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="city" id="city"
placeholder="City, town"
value="{{ old('city') }}">
</div>
</div><!-- /.form-group -->
<!-- State/Province/Region -->
<div class="form-group has-feedback">
<label for="state_region" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="state_region" id="state_region"
placeholder="State, province, region, territory, etc."
value="{{ old('state_region') }}">
</div>
</div><!-- /.form-group -->
<!-- Country -->
<div class="form-group has-feedback">
<label for="country" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="country" id="country"
placeholder="Country"
value="{{ old('country') }}">
</div>
</div><!-- /.form-group -->
<!-- Postal Code -->
<div class="form-group has-feedback">
<label for="postal_code" class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<input type="text" class="form-control"
name="postal_code" id="postal_code"
placeholder="Postal code"
value="{{ old('postal_code') }}">
</div>
</div><!-- /.form-group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="submitVendor" type="submit" class="btn btn-primary">Add Vendor</button>
</div>
</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.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire