Solution 1 :

i have noticed the clickHandler function cancels the click of the submit form .

Problem :

I have a div with a modal wrapper class which creates an overlay on a page.

The div has a pop up modal which opens a HTML form with an id of modal feedback.
The modal is positioned at the center of the page using CSS.
The form has a submit button with an id of submit which i am listening with an event listener on submit. This submit button does not work.

When i remove this form from the modal wrapper it works fine.
What is preventing the submit button from submitting?
Can anyone guide me how to approach this issue?

I have tried searching through the many answers related to this question but none seems to hit or relate to my issue.

This is my html mark up.

<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 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" 


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

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


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

console.log('was clicked')

When i click on the button the form does not respond


Comment posted by Muhammad Usman

seems like you are

Comment posted by MARTIN GITAU

George at least i should console log the message ‘i was clicked’