Button submit not working when inside modal-CodePudding

I have a page that has the following code:

<div >
        
        <input type="submit" value="Save" />

        <!-- Button trigger modal -->
        <button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </button>
    </div>

and below the form:

<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <h5  id="exampleModalLabel">Modal title</h5>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div >
                ...
            </div>
            <div >
                <button type="button"  data-bs-dismiss="modal">Close</button>
                <button type="button"  >Save changes</button>
            </div>
        </div>
    </div>
</div>

the input type submit " <input type="submit" value="Save" /> " works, however when I click on the modal button, and the modal opens, the button inside "Save Changes" does not work.

I have also changed the button inside the modal to the same code as the Save button, but it also doesn't work. it doesn't call the OnPost button.

I have also tried adding a handler " asp-page-handler="Save" " and renaming the OnPostAsync to OnPostSaveAsync but does not work.

The inspect does not execute anything on the browser also.

I'm using razor pages asp net6 and the modal code comes from the bootstrap5 docs.

CodePudding user response：

Your <div > is likely located as a direct child of <body> instead of being inside its <form>...
... but <button type="submit"> won't work unless the <button> itself is a descendant of the <form> element that should be submitted.
Fortunately, if the <button> is not a descendant of a <form>, then you can manually bind it using the <button form=""> attribute, which contains the id="" of the <form> you want to submit.
- Note that the form="" attribute can also be used with all HTML form controls: on all <input> elements, <textarea>, and <select> - which allows you to work-around the fact we can't nest <form> elements.