0

I have the following code which is a modal element. The "NewButton" element is supposed to trigger a text input box in which the user writes the reason for the delete action. The Scripts part is what copilot suggested me to do, but it's doing nothing when I click the button. I already have an Index.js page in which I configure the modals onOpen events, I don't know if I should have the Scripts part in that file. I never used ABP framework before, so I'm little confused, but it's what my company is using so I have to adapt to it. I already tried changing the button "class" to "id" and to using regular bootstrap syntax instead of abp but nothing worked. Nothing logged either.

<form asp-page="/NxsAlteraStatusPed/LogModal">
    <abp-modal size="Large">
        <abp-modal-header title="@L["LogQuery"].Value"></abp-modal-header>
        <abp-modal-body>
            @for(var i = 0; i < Model.ViewModel.LogQuery.Count; i++)
            {
                <strong>@Model.ViewModel.LogQuery[i].StatPedVendaDescr</strong>
                <abp-card-text>@Model.ViewModel.Info[i]</abp-card-text>
            }
            <abp-button class="NewButton" text="@L["Action:DeleteLog"].Value" icon="trash" button-type="Danger" />
        </abp-modal-body>
        <abp-modal-footer buttons="@(AbpModalButtons.Cancel|AbpModalButtons.Save)"></abp-modal-footer>
    </abp-modal>
    <div id="inputBox" style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1060;">
        <input type="text" id="logInput" placeholder="Enter log info" />
        <button type="button" onclick="submitLog()">Submit</button>
    </div>
</form>

@section Scripts {
    <script>
        document.getElementById('NewButton').addEventListener('click', function (event) {
            console.log('button was clicked');
            event.preventDefault(); // Prevent form submission
            document.getElementById('inputBox').style.display = 'block'; // Show the input box
        });

        function submitLog() {
            // Logic to handle the submission of the input box
            document.getElementById('inputBox').style.display = 'none'; // Hide the input box after submission
        }
    </script>
}
1
  • Hi, document.getElementById('NewButton') assumes it's an 'id'. So indeed, you must already put id='newButton'. Else, use getElementsByClassName() and take the first element.
    – Kalves
    Commented Jul 2 at 6:29

0