title: how to make document.forms[0].submit() work?
body: <p>After i implemented my dialog box as a alert measure for user to confirm submission instead of a direct submission upon clicking, my document.forms[0].submit() does not work anymore. The page refreshes and the page stays the same. Before that dialog box was created, everything works perfectly. what is the problem here?</p>
  
  <p>After:</p>
  
  <pre><code>  &lt;script&gt;
     //trigger dialog
   $('#submitIter').click(function(){
      $("#dialog-submit").dialog("open");
                  return false
  });
  
  $("#dialog-submit").dialog({            
      autoOpen: false,
      resizable: false,
      height: 200,
      width: 200,
      modal: true,
      buttons: {
          "Proceed": function(){
              //submit after user clicks proceed cannot seem to work
              document.forms[0].submit();
              $(this).dialog("close");
  
          }
      }
  });
     &lt;/script&gt;
  
      &lt;form action="{{ request.path }}" method="post" enctype="multipart/form-data"&gt;
  
        &lt;input type="image" src="images/submit.png" id="submitIter"&gt;
  
      &lt;/form&gt;
  </code></pre>
  
  <p>Before:</p>
  
  <pre><code>&lt;script&gt; document.forms[0].submit() &lt;/script&gt;
  </code></pre>