title: HTML Form onsubmit only working sometimes
body: <p>Project Summary: Open Child popup and input information into Form. Onsubmit the information is input into the database, the popup is hidden and parent page is unhidden. The parent page then displays the information from the database. </p>
  
  <p>For the most part the code that I have works, but in some cases when I submit the form the window closes and the information is not added to the database. I'm wondering if I need to add a delay in somewhere so that there is time to insert the data into the database, but I've never worked with any timing code and am unsure of where it would need to go. Does anyone have any idea why it will only add to the database sometimes? The problem times tend to be the first few times the form is used and when trying to enter the same information right after one another.</p>
  
  <p>The code related to the form looks like this:</p>
  
  <pre><code>    &lt;script&gt;
      var db = window.openDatabase("DB1", "", "DB", 1024 * 1000)
  
      function closeSelf() {
          document.forms['moneyorder_form'].submit();
          hide(document.getElementById('AddMoneyOrderPopup'));
          unHide(document.getElementById('MoneyOrdersMain'));
      }
  
      $(document).ready(function () {
          $('#moneyorder_form').submit(function () {
  
              insertMO($('#moCNumber').val(), $('#moCAmount').val(), "MoneyOrder");
              renderMoneyOrders();
              return false;
          });
          renderMoneyOrders();
      });
  
  
  &lt;/script&gt;
  
  &lt;div data-role="page" id="AddMoneyOrderPopup"&gt;
      div data-role="content" data-theme="a"&gt;
          &lt;h2 style="text-align:center"&gt;Money Order&lt;/h2&gt;
          &lt;form method="get" id="moneyorder_form" name="moneyorder_form" onsubmit="closeSelf()"&gt;
              &lt;div class="ui-grid-a"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;p style="text-align:center; display:inline"&gt;&lt;b&gt;Number&lt;/b&gt;&lt;/p&gt;
                      &lt;p&gt;&lt;input type="number" required="required" step="1" id="moCNumber" name="moCNumber"&gt;&lt;/p&gt;&lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;p style="text-align:center; display:inline"&gt;&lt;b&gt;Amount&lt;/b&gt;&lt;/p&gt;
                      &lt;p&gt;&lt;input type="number" required="required" min=".01" step=".01" id="moCAmount" name="moCAmount"&gt;&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-a"&gt;
          &lt;input type="submit" data-role="button" data-theme="a" value="Add" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>