Level 39
Please share your store method.
May 13, 2022
6
Level 2
Submit data to database using Inertia with React
I have a form that is supposed to submit order details to the orders table through a custom select element (headlessUI Combobox). The element works fine but I can't seem to pass the data selected to the database, in this case, customer_id.
Here's the form on the Create.js page:
export default function Create(props) {
const [selected, setSelected] = useState(""),
{customers} = usePage().props
const {post, processing, data, setData} = useForm({
customer_id: ""
})
const customerList = customers.map((customer, index) => (
{key: customer.id, name: customer.name}
))
const submit = (e) => {
e.preventDefault()
data.customer_id = selected.key
post(route('resources.orders.store'), data)
}
<Form submit={submit}>
<SelectSearch options={customerList} name={customer_id} value={selected}
onChange={setSelected} />
{/* other form elements in here */}
<Button processing={processing} />
</Form>
}
When I console.log(data) I get the selected value in the console: customer_id: 4. But I get the Error SQLSTATE[HY000]: General error: 1364 Field 'customer_id' doesn't have a default value when the data is posted. The customer_id is a foreignId() field. I can't seem to create the record.
Level 2
@sr57 This is my store() method, though I think the problem is the frontend capturing the data and sending it to Eloquent:
* Store a newly created resource in storage.
*
* @param StoreOrderRequest $request
* @return RedirectResponse
*/
public function store(StoreOrderRequest $request) : RedirectResponse
{
$data = Order::create([
$request->validated(),
'user_id' => auth()->user()->id,
]);
return back()->with('message', 'Order has been created successfully.');
}
The rest of the data is being submitted, except for the customer_id field which is got from a custom input (headlessUI).
Level 2
@sr57 When I dd($request->all()) I get the following:
^ array:5 [▼
"order_date" => "2022-05-14"
"customer_id" => 5
"service_id" => "3"
"quantity" => "1"
"discount" => "0"
]
I think the customer_id is not being passed properly, but I don't know what I'm doing wrong.
Level 39
Try
data.append('customer_id', selected.key)
Level 2
@sr57 I get the following error in the console: data.append is not a function. However, when I do dd($request->all()) I get the following:
^ array:5 [▼
"order_date" => "2022-05-14"
"customer_id" => 5
"service_id" => "3"
"quantity" => "1"
"discount" => "0"
]
The above is also similar when I console.log(data).
I think the customer_id value is not being passed properly, but I don't know what I'm doing wrong.
Level 2
I solved the issue. I had to pick the value of the custom input and append it to data.customer_id in the submit method:
const submit = (e) => {
data.customer_id = document.querySelector('[name="customer_id[id]"]').value
post(route("resources.orders.store"), data)
}
Headless UI Combobox component renders hidden input(s) that stores the values you select. So I had to just append the value of that hidden input to the data.customer_id. Then I had to change my store() method:
public function store(StoreOrderRequest $request) : RedirectResponse
{
Order::create([
$request->validated(),
'customer_id' => $request->customer_id,
'order_date' => $request->order_date,
'service_id' => $request->service_id,
'discount' => $request->discount,
'user_id' => auth()->user()->id,
'updated_by' => auth()->user()->id,
]);
}
Please or to participate in this conversation.