I am having some issue with an HTTP post to my own API.
I have a form build within a Vue component. The form is for a quotation request.
Whenever the post passes I want to redirect the webapp to the thanks URL. Locally the form submits fine and redirects to the correct URL.
On the server I am getting a HTTP status code of 0 without status text in javascript. So the .then()
the function is totally ignored. The post request, however, passes completely. I am sending an e-mail right before I return JSON to the post. And that e-mail sends perfectly fine.
The problem is now, what is possibly going wrong!
.then()
to .done()
Code of my controller function (the creation makes the rows in the database) :
public function send(Request $request)
{
$this->validate($request, [
'companyname' => 'required',
'address' => 'required',
'address2' => 'required',
'postalcode' => 'required',
'city' => 'required',
'country' => 'required',
'initials' => 'required',
'lastname' => 'required',
'email' => 'required',
'telephone' => 'required',
]);
$quotation = Quotation::create([
'company_name' => $request->companyname,
'address' => $request->address,
'address2' => $request->address2,
'city' => $request->city,
'country' => $request->country,
'postalcode' => $request->postalcode,
'debtor_code' => $request->debtor_code,
'gender' => $request->gender == 'male' ? 'M' : 'F',
'initials' => $request->initials,
'firstname' => $request->firstname,
'lastname' => $request->lastname,
'email' => $request->email,
'telephone' => $request->telephone,
'vat' => $request->vat ?: null
]);
$attachments = collect();
collect($request->json('products'))->each(function ($data) use ($quotation, $attachments) {
$product = $quotation->products()->create([
'quotation_id' => $quotation->id,
'description' => $data['description'],
'house_formulation' => $data['formulation_type'] == "house_formulation" ? true : false,
'own_formulation' => $data['formulation_type'] == "own_formulation" ? true : false,
'formulation_text' => $data['formulation'],
'product_kind' => $data['product_kind'],
'packaging_kind' => $data['packaging_kind'],
'packaging_content' => $data['packaging_content'],
'product_quantity' => $data['product_quantity'],
'delivery_time' => $data['delivery_time'],
'remarks' => $data['remarks']
]);
$formulationBlob = base64_decode(substr(strstr($data['formulation_document'], ','), 1));
$product->setDocument($data['formulation_filename'], $formulationBlob);
if($data['formulation_document']){
$attachments->push([
'product' => $product->id,
'file' => asset("storage/{$product->document->path}"),
'options' => []
]);
}
});
Mail::to('email@mail.com')->send(new QuotationRequest($quotation, $attachments));
return response()->json([
'status' => 'OK',
], 200);
}
Code of the vue-resource post :
submitRequest() {
this.$http.post('/quotation-request', {
products: this.products,
debtor_code: this.debtor_code,
address: this.address,
address2: this.address2,
postalcode: this.postalcode,
city: this.city,
country: this.country,
vat: this.vat,
gender: this.gender,
initials: this.initials,
firstname: this.firstname,
lastname: this.lastname,
email: this.email,
telephone: this.telephone,
companyname: this.companyname,
}).then(request => {
//THIS SHOULD FIRE. BUT WE IGNORE THE THEN FUNCTION.
window.location = '/quotation-request/thanks';
}, (response) => {
console.log(response);
if (response.status == 422) {
this.errors.record(response.body);
bootbox.alert("Er ging iets fout! zijn alle velden ingevuld? <br><br>Klik op de knop 'Edit quotation request' om terug te gaan naar het formulier");
} else {
bootbox.alert("Er ging iets goed fout. Neem contact op met de systeembeheerder !")
}
});
},
And in my console the code is 0 without statustext
The network tab shows :
The problem was that i had 2 forms on the page. The second form showing for the overview where the submit was happening didn't have the @submit.prevent
attribute added..