My goal is to implement a greyed-out background upon form submission without a traditional submit button. Instead, I want the form to be submitted when the user selects an option from one of three drop-down lists.
Here is a snippet of the form:
<form action="{{route('cats.filter')}}" method="post" id="myform">
Example of the select element:
<select class="custom-select" name="goalcat" id="goalcat" onchange="this.form.submit();">
The current issue lies in the JS code where the greyed-out background only appears when a drop-down list is opened before any selection is made. To fix this, I need to assign a valid ID for the JS code so that the overlay shows after form submission.
JS code snippet:
$("#myform").click(function () {
$(".overlay").show();
});
CSS styling for the overlay:
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}