Vue - Form inside another form and submit event trigger

Question

I have a form inside another form and I want to prevent default action for both forms on submit event:

Vue component:

<template>
    <div v-show="isActive" @submit.prevent="onSubmit">
        <slot :form="form"></slot>
    </div>
</template>

Child:

<form method="POST" action="/update-user">

    // form fields part 1

    <form method="GET" action="/delete-user">
        <button type="submit">
            <span>{{ $is_deleted ? 'Cancel Delete' : 'Delete Account' }}</span>
        </button>
    </form>

    // form fields part 2

    <button type="submit">
        <span>Update</span>
    </button>
</form>

When I submit update-user form then the component onSubmit method is hit and prevents default action. However, when I hit delete-user form then the onSubmit method is not hit and the page gets reloaded.

If I get the second form outside of the first one, then it works.

How I can trigger onSubmit method for the second form?

I don't know the answer, but check out this article. Proper Form Handling in VueJS. — Josh
– Josh, Commented Apr 26, 2021 at 14:44
You can also look into vee-validate, where you can build nested forms. Very good if your forms become more advanced and advanced validations, like custom validators. If this is your only form and no validations, then perhaps vee-validate is not needed. But just for future if you do need some better tool to build forms :) There is also vuelidate, but I have no experience of that. — AVJT82
– AVJT82, Commented Apr 27, 2021 at 17:08

Shirshak55 · Accepted Answer · 2021-04-26 14:42:04Z

2

No, This looks like nested form and it violates the spec as outlined in Prohibitions.

Form must not contain another form. I think you should design your app differently. May be two different forms. Or just use plain ajax request as its a vue app anyway?

answered Apr 26, 2021 at 14:42

Shirshak55

5604 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

Thank you, I guess I will have to get the nested form outside and just use some onclick button event to submit when clicked.

Collectives™ on Stack Overflow

Vue - Form inside another form and submit event trigger

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related