I’m trying to update a card element in ASPX and ASPX.cs which returns the values that a user has entered and some description of them before sending it off as an email to whom it concerns. So far, even though the modal is triggered, the card is not visible and so also the updated values.
<div class="row">
<div class="col" data-bs-toggle="modal" data-bs-target="#addLendAFriend"><asp:Calendar ID="AvailabiltyCalendar" OnSelectionChanged="Availability_Calendar_SelectionChanged" runat="Server"/></div>
<div class="col">
<asp:Repeater ID="personalLibrary" OnItemDataBound="personalLibrary_ItemDataBound" runat="Server">
<ItemTemplate>
<div class="card">
<div class="card-body">
<p>Book Check-In<%# Eval("dateCheck") %><br />
Genre<%# Eval("sqlGenre") %><br />
Pages<%# Eval("sqlPages") %><br />
Author <%# Eval ("sqlAuthor") %>
</p>
<small><i>Press the submit button if the information entered is correct.</i></small>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
<div class="modal align-items-center" role="document" id="addLendAFriend" tabindex="-1" runat="Server" clientidmode="static">
<div class="container d-flex justify-content-center">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Lend A Friend
</div>
<div class="modal-body">
<div class="row mt-2 mb-2">
<div class="col">
<label for="cdueDate" class="form-label">CheckIn</label>
<asp:TextBox class="form-control" id="cdueDate" readonly />
</div>
</div>
<div class="row mb-2 g-6">
<div class="col">
<label class="form-label">Select Genre</label>
<asp:DropDownList
AutoPostBack="true"
ClientIDMode="Static"
CssClass="form-select"
required=""
DataSourceID="sSQLGenre"
DataTextField="sqlGenre"
DataValueField="sqlGenre"
ID="ldfGenre"
OnChange="return false;"
runat="Server"></asp:DropDownList>
</div>
</div>
<div class="row g-6">
<div class="col">
<label class="form-label">Select Author</label>
<asp:DropDownList
AutoPostBack="true"
ClientIDMode="Static"
CssClass="form-select"
required=""
ID="ldfAuthor"
OnChange="return false;"
DataSourceID="sSQLAuthor"
DataTextField="sqlAuthor"
DataValueField="sqlAuthor"
runat="Server"></asp:DropDownList>
</div>
</div>
<div class="row g-6">
<div class="col">
<label class="form-label">Select Pages</label>
<asp:DropDownList
AutoPostBack="true"
ClientIDMode="Static"
CssClass="form-select"
required=""
ID="ldfPages"
OnChange="return false;"
runat="Server">
<asp:ListItem Value="ldfsmall" Text="Between 50-100"></asp:ListItem>
<asp:ListItem Value="ldfmedium" Text="Between 100-200"></asp:ListItem>
<asp:ListItem Value="ldfcrazy" Text="Between 250-500"></asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row justify-content-end">
<div class="col-auto">
<asp:Button
CssClass="btn btn-secondary"
ID="sCancelCheckOutForm"
OnClick="sCancelCheckOutForm_Click"
Text="Cancel"
runat="Server"/>
</div>
<div class="col-auto">
<asp:Button
CssClass="btn btn-primary"
ID="sSubmitldfForm"
OnClick="sSubmitldfForm_Click"
Text="Submit"
runat="Server"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%--Form Content --%>
<div class="row justify-content-end">
<div class="col-auto pt-4 mb-5">
<asp:Button CssClass="btn btn-success" ID="Submitldf" OnClick="Submitldf_Click" runat="Server" Text="Lorem Ipsum or Latin"></asp:Button>
</div>
</div>
<script>
document.getElementById('sSubmitldfForm').addEventListener('click', function () {
// Access the calendar value directly
var selectedDate = document.getElementById('<%= AvailabiltyCalendar.ClientID %>').value;
// Update the TextBox with the selected date
document.getElementById('cdueDate').value = selectedDate;
document.getElementById('display_info').innerHTML = '<h3>Lend A Friend</h3>' + '<p>Thank you for using Lend A Friend. The orange cat has your title knocked over. Don't forget to pick it up</p><br />' +
'Date: ' + + '<br/>' +
'Genre: ' + document.getElementById('ldfGenre').value + '<br/>' +
'Author: ' + document.getElementById('ldfAuthor').value + '<br/>' +
'Pages: ' + document.getElementById('ldfPages').value;
// Optionally hide the modal after submitting
var myModalOT = new bootstrap.Modal(document.getElementById('add'));
myModalOT.hide();
});
</script>
I’ve tried to modify the JS and ASPX which have led to the card no longer been seen. I added the repeater to bind the data from the sql to see if that would work instead and display but nothing as well. Searching Stack Overflow hasn’t yielded any results which solve my problem. If anyone can help me point out where I messed up or even provide a solution, that would be amazing. I can also provide the code behind if needed