Level 6
so, the array isn't empty if user has change the default option ? will it return not an empty array ? is it return as you want when you click all option and selected all the select box or radio ?
Nov 4, 2023
5
Level 3
Livewire getting default values of an input array
I have the following setup in my Cart.php file :
public $options = [];
public function addToCart()
{
foreach ($this->options as $key=>$value){
dump($key . $value);
}
$this->options = [];
}
And the inputs are set up like this (custom added fields that are different for each product. Can be checkbox, select or text input as well) :
<input type="number" min="0" id="{{ $field->name }}" wire:model="options.{{ $field->id }}" placeholder="{{ $field->name }}" required/>
The problem is : When user doesn't select anything, options array returns empty. I know this is expected behavior since I'm setting it this way in the Cart.php, but there are default values in the inputs (like the first option in a select input, default state of a checkbox etc) and when user clicks Add to cart button without changing the default selected values it returns empty and I can't process the data if it doesn't exist.
Update : I'm pretty sure it's not the best way to do this but I solved it by giving each field type a hardcoded default value. With all due respect to livewire, it's just stupid that we can't get the default data (that is right there in the HTML) to the component file.
Level 3
so, the array isn't empty if user has change the devault option ?
Yes.
is it return as you want when you click all option and selected all the select box or radio ?
Yes.
I think the problem is livewire is not getting the wire:model connection unless the user changes the value of that input.
For example I only have a size select input and small is selected by default.
If I don't touch it and click Add to cart array returns [].
If I click the select input and select small (which has already been selected), it still returns []
But if I change it to medium and then back to small, I'm getting [6 => small] which is what it should return in the first place.
Level 6
since you're using livewire, you can try to set the default value in the mount function in your component. without that the wire model binding only trigger changes when user modified or click to another value
Level 6
and if your input is dynamic
you can use this code as reference, customize it as you need
<button wire:click="addToCart" onclick="captureDefaultValues()">Add to Cart</button>
<script>
function captureDefaultValues() {
var defaultValues = {};
@foreach ($fields as $field)
defaultValues["{{ $field->id }}"] = document.getElementById("{{ $field->name }}").value;
@endforeach
Livewire.emit('updateDefaultValues', defaultValues);
}
</script>
class Cart extends Component
{
public $options = [];
protected $listeners = ['updateDefaultValues'];
public function addToCart()
{
// your code here . . .
}
public function updateDefaultValues($defaultValues)
{
// update the $options array with the default values
foreach ($defaultValues as $fieldId => $value) {
$this->options[$fieldId] = $value;
}
}
// ... rest of your Livewire component code
}
Level 24
@motinska94 better show the select box rendered html code, and the component class logic, otherwise hard to given a solution
always server side validate the client data, if has something wrong, give a feedback to the client
in frontend, may be disabled the button when not selected anythings
<button type="button" x-bind:disabled="$wire.options == ''">
Add To Cart
</button>
Please or to participate in this conversation.