如何在提交更改表单后加载灰色背景答案

【问题标题】：How to load a greyed-out background after an On change form submission如何在提交更改表单后加载灰色背景
【发布时间】：2020-05-22 17:34:27
【问题描述】：

我正在尝试在提交表单时设置灰色背景。这里的不同之处在于我没有提交按钮，因为我在用户从 3 个下拉列表之一中选择一个选项后提交表单。

表单示例：

<form action="{{route('cats.filter')}}" method="post" id="myform">

选择样本：

<select class="custom-select"  name="goalcat" id="goalcat" onchange="this.form.submit();">

由于我在 JS 代码中添加了表单的 Id，因此它部分工作，其中正文显示为灰色并且显示加载按钮，但仅当用户打开任何下拉列表时，并且在选择任何选项之前。我需要为JS代码输入一个有效的ID，以便它在提交后显示灰色背景。

JS：

  $("#myform").click(function () {
    $(".overlay").show();
});

CSS：

.overlay {
    background: #e9e9e9;  
    display: none;        
    position: absolute;   
    top: 0;                  
    right: 0;             
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是使用 javascript 的代码：

function submitForm(){
var form = document.getElementById('myform');
form.submit();
var overlay = document.getElementById('overlay');
overlay.style.display = 'block';

}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

<form action="" method="post" id="myform">
    <select class="custom-select"  name="goalcat" id="goalcat" onchange="submitForm();">
       <option value=""> ABC </option>
       <option value=""> XYZ </option>
       <option value=""> LMCV </option>
       <option value=""> AFA </option>
    </select>
</form>

<div id="overlay"></div>

【讨论】：