I'm using two forms like that, one for choosing a category so the book related to this category will show below. One modal form inside each book to borrow a book from the library, but my problem is, modal form inside can open but can't act. I don't know why. Anybody can help me. The demo image is below
@using (Html.BeginForm("Index", "BorrowBook", FormMethod.Post, new { name = "demoForm" }))
{
@Html.DropDownList("id_category", (IEnumerable<SelectListItem>)ViewBag.listTest, "-- Tất Cả Thể Loại --",
new { onchange = "SelectedIndexChanged()" })
<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
@foreach (var item in ViewBag.list)
{
var itemName = "#exampleModalss" + item.id_book;
var itemName1 = "exampleModalss" + item.id_book;
<div class="movies-box" style="height: 430px;width: 250px; display: flex; justify-content: space-between; align-items: center; flex-direction: column; box-shadow: 2px 2px 30px rgb(0 0 0 / 20%); margin: 20px; border-radius: 5px; overflow: hidden; border-top: 3px solid #292929;">
<!--img------------>
<a href="#">
<div class="movies-img">
<img src="/Content/assets/img/@item.image" style=" width: 250px; height: 300px; object-fit: cover;" />
</div>
</a>
<h3 style="font-weight:bold">@item.name</h3>
<p>Số lượng còn lại: @item.quantity</p>
@if (item.quantity != 0)
{
<div style="margin-bottom:20px" class="button--movie">
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="@itemName">Thuê sách</button>
</div>
}
else
{
<div style="margin-bottom:20px" class="button--movie">
<button type="button" class="btn btn-danger" data-bs-toggle="modal" value="Disabled">Hết sách</button>
</div>
}
</div>
<div class="modal fade" id="@itemName1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
@*<form action="/BorrowBook/Add" method="post">*@
<div class="modal-content">
<form action="/BorrowBook/Add" method="post">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">@item.name</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="resultss" class="modal-body">
<div class="row">
<div class="col-4">
<div class="movies-img">
<img src="/Content/assets/img/@item.image" style=" width: 300px; height: 400px; object-fit: cover;" />
</div>
</div>
<div class="col-4">
<h5>Thông tin sách</h5>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Tên sách</label>
: @item.name
</div>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Tác giả</label>
: @item.author
</div>
@foreach (var item1 in ViewBag.listP)
{
if (item1.id_publisher == item.id_publisher)
{
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Tên nhà xuất bản</label>
: @item1.name
</div>
}
}
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Năm xuất bản</label>
: @item.year_publish
</div>
@foreach (var item2 in ViewBag.listC)
{
if (item2.id_category == item.id_category)
{
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Tên thể loại</label>
: @item2.name
</div>
}
}
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Price</label>
: @item.price VND
</div>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Mô tả:</label>
<br> @item.description
</div>
</div>
<div class="col-4">
<h5>Thông tin sinh viên</h5>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Tên sinh viên:</label>
: @userInfomatiom.fullname
</div>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Địa chỉ:</label>
: @userInfomatiom.address
</div>
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Số điện thoại:</label>
: @userInfomatiom.phone
</div>
<label for="category-film" class="col-form-label">Ngày thuê :</label>
<input type="date" class="form-control" id="tenphim" name="start_time" tabindex="1" min="@dtnoww" required>
<label for="category-film" class="col-form-label">Ngày trả :</label>
<input type="date" class="form-control" name="end_time" tabindex="1" value="" min="@dtnoww" required>
<input type="hidden" class="form-control" name="idUser" tabindex="1" value="@userInfomatiom.id_user" hidden>
<input type="hidden" class="form-control" name="idBook" tabindex="1" value="@item.id_book" hidden>
</div>
</div>
</div>
<div class="modal-footer">
<button style="width:100px" type="submit" class="btn btn-primary">Thuê</button>
</div>
</form>
</div>
@*</form>*@
</div>
</div>
}
</div>
}
Script to change category
<script type="text/javascript">
function SelectedIndexChanged() {
document.demoForm.submit();
}
</script>
When I click on each book, it can show a modal like that, but when I click on submit button, it can not respond.
When I check the element, I can't see from inside (form modal)
I need help. Thank you
