提交按钮在模式弹出窗口中不起作用，但单击按钮正在起作用

Question

我有一个带模式包装器类的div，它在页面上创建一个叠加层。

div有一个弹出模式，该模式会打开一个HTML表单，其ID为模式反馈。使用CSS将模式放在页面的中心。表单上有一个带有提交ID的提交按钮，我正在提交时使用事件监听器进行监听。此提交按钮不起作用。

当我从模式包装中删除此表单时，它工作正常。是什么导致提交按钮无法提交？谁能指导我如何解决这个问题？

我尝试搜索与该问题相关的许多答案，但似乎都没有找到与我问题相关的答案。

这是我的html标记。

<div id="modal_wrapper" class="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p class="better-exp-p" id="better-exp-p">Select House Type:</p>
<form id="modal_feedback" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span class="buy-let-furnished">
<label for="buy" class="buy-let-furnished-label">Buy</label>
<input class="selector" id="buy" name="buy-let-furnished" type="radio" value="1">
<label for="let" class="buy-let-furnished-label">Let</label>
<input class="selector" id="let" name="buy-let-furnished" type="radio" value="2">
<label for="let" class="buy-let-furnished-label">Fully Furnished</label>
<input class="selector" id="furnished" name="buy-let-furnished" type="radio" value="3">
</span>

<span class="Bedrooms">
<p>Number of Bedrooms :</p>
<label for="onebedrooms" class="bedrooms-label">1</label>
<input class="selector" id="onebedrooms" name="bedrooms" type="radio" value="1">
<label for="twobedrooms" class="bedrooms-label">2</label>
<input class="selector" id="twobedrooms" name="bedrooms" type="radio" value="2">
<label for="threebedrooms" class="bedrooms-label">3</label>
<input class="selector" id="threebedrooms" name="bedrooms" type="radio" value="3">
<label for="morethanthreebedrooms" class="bedrooms-label">more than 3 </label>
<input class="selector" id="morethanthreebedrooms" name="bedrooms" type="radio" 
value="4">

</span>


<span class="location">                
<label for="area" class="area-head">Location </label>
<input class="selector" id="location" name="location" type="text" value="">                            
</span>          


<button type="submit" class="better-exp-p submit" id="submit"  name="feedbackForm" 
value="submit">Search</button> 
<button id="expand" type="expand" name="feedback-expand-Form" value="More-search">More Detailed 
Search</button>

</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->
<!----js file --->
document.getElementById('modal_feedback').addEventListener('submit', validate);

validate(e){
e.preventDefault();
console.log('was clicked')
console.log(this);                    
 }

当我单击按钮时，表单没有响应

Answer 1

您在验证之前忘记编写函数

document.getElementById('modal_feedback').addEventListener('submit', validate);

function validate(e){
e.preventDefault();
console.log('was clicked')
console.log(this);                    
 }

<div id="modal_wrapper" class="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p class="better-exp-p" id="better-exp-p">Select House Type:</p>
<form id="modal_feedback" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span class="buy-let-furnished">
<label for="buy" class="buy-let-furnished-label">Buy</label>
<input class="selector" id="buy" name="buy-let-furnished" type="radio" value="1">
<label for="let" class="buy-let-furnished-label">Let</label>
<input class="selector" id="let" name="buy-let-furnished" type="radio" value="2">
<label for="let" class="buy-let-furnished-label">Fully Furnished</label>
<input class="selector" id="furnished" name="buy-let-furnished" type="radio" value="3">
</span>

<span class="Bedrooms">
<p>Number of Bedrooms :</p>
<label for="onebedrooms" class="bedrooms-label">1</label>
<input class="selector" id="onebedrooms" name="bedrooms" type="radio" value="1">
<label for="twobedrooms" class="bedrooms-label">2</label>
<input class="selector" id="twobedrooms" name="bedrooms" type="radio" value="2">
<label for="threebedrooms" class="bedrooms-label">3</label>
<input class="selector" id="threebedrooms" name="bedrooms" type="radio" value="3">
<label for="morethanthreebedrooms" class="bedrooms-label">more than 3 </label>
<input class="selector" id="morethanthreebedrooms" name="bedrooms" type="radio" 
value="4">

</span>


<span class="location">                
<label for="area" class="area-head">Location </label>
<input class="selector" id="location" name="location" type="text" value="">                            
</span>          


<button type="submit" class="better-exp-p submit" id="submit"  name="feedbackForm" 
value="submit">Search</button> 
<button id="expand" type="expand" name="feedback-expand-Form" value="More-search">More Detailed 
Search</button>

</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->
<!----js file --->