Hi @pweil, I think the problem is that your reset button has no type attribute. By default type="submit" is used if no type attribute is provided (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type).
So just add type="button" to your reset button and it should work.
reset button triggers form submission (SOLVED)
I have a form in a blade file that calls a checkbox component. If submitted, the form calls a method that uses axios to save changes to the db:
{{ Form::model($project, [
'id' => 'project-counties',
'class' => 'project-and counties',
'@submit.prevent' => 'updateProject("counties")',
])
}}
I want to provide a button in this form that resets the original values (any boxes that were originally checked on page load). Restoring the original values is not problem; the button calls a mapped Pinia action that replaces an array in one store with a different array in a second store.
<button @click="setForm('counties', 'counties')" >Reset</button>
But when I click the button and run this action, the values get restored. But then the form gets submitted, which I don't want; it triggers a notification ("Changes saved") that I can't control or stop.
EDIT: I am sure now that the event (below) is not triggering the submission. But I have no idea why clicking the Reset button running that Pinia action would trigger the submission method to run.
The only thing I can think of that might trigger this is that a change event is emitted by the checkbox component. I.e.,
export default {
name: 'checkbox',
model: {
prop: 'checked',
event: 'change'
},
[...]
In devtools you can see the event:
event info
component:checkbox
event:"change"
params:Array[1]
0:Array[1]
0:1
Could this event somehow be triggering the form submission? Is there a way to prevent this? I have no event handler for this event (that I know of).
Please or to participate in this conversation.