title: Javascript form action gets executed before confirmation with onsubmission event
body: <p>I am trying to add a confirmation box when deleting a <code>&lt;div&gt;</code> using a <code>&lt;form onsubmission=return confirm("Please confirm");"&gt;</code> like in this <a href="https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box">thread</a>, but the action attached to my form gets executed before I can see the confirmation dialog box. The <code>&lt;div&gt;</code> are generated dynamically, and the form basically deletes a csv row using Python/Flask to be read back with JQuery/Javascript after modifications. My code looks more or less like this.</p>
  
  <p>First I have a base html:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div id="projects"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then I use javascript to append multiple <code>&lt;div&gt;</code> dynamically using information read from a csv through a Python/Flask server:</p>
  
  <pre><code>var ProjName = {{ ProjName|safe }};    
  $(document).ready(function(){
      for(i = 0; i &lt; {{ row_count|safe }}; i++) {
          $('#projects').append('&lt;div class="projectDivs" id="'+ i +'"&gt;&lt;form onsubmit="return confirm("Do you really want to submit the form?");" action="/dashboard" method="post"&gt;&lt;input type="hidden" name="hidden-value" value="'+i+'"&gt;&lt;button value="delete" name="submit" class="close"&gt;×&lt;/button&gt;&lt;/form&gt;&lt;center&gt;&lt;h2&gt;'+ ProjName[i] + '&lt;/h2&gt;&lt;/center&gt;&lt;/div&gt;');
      }
  });
  </code></pre>
  
  <p>In the background, I am using Python/Flask to read, manipulate and serve the info, but I assume my problem is on the client side so no point showing that. The problem I have is when I press the 'x' to delete, the div gets deleted before the dialog box is shown... any help would be greatly welcomed.</p>