title: Bootstrap modal form won't close on submit
body: <p>I'm having trouble with closing the modal when clicking the sign in button. Currently the Modal form will open up as soon as the page loads in. If I use data-dismiss=&quot;modal&quot; in the submit button, my form doesn't record the input values into the csv file. Without the data-dismiss, the modal will continue to open unless I click the x in the top corner or click outside the modal.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;?php
  $error = '';
  $name = '';
  
  function clean_text($string)
  {
   $string = trim($string);
   $string = stripslashes($string);
   $string = htmlspecialchars($string);
   return $string;
  }
  
  if(isset($_POST[&quot;submit&quot;]))
  {
   if(empty($_POST[&quot;name&quot;]))
   {
    $error .= '&lt;p&gt;&lt;label class=&quot;text-danger&quot;&gt;Please Enter your Name&lt;/label&gt;&lt;/p&gt;';
   }
   else
   {
    $name = clean_text($_POST[&quot;name&quot;]);
    if(!preg_match(&quot;/^[a-zA-Z ]*$/&quot;,$name))
    {
     $error .= '&lt;p&gt;&lt;label class=&quot;text-danger&quot;&gt;Only letters and white space allowed&lt;/label&gt;&lt;/p&gt;';
    }
   }
   if($error == '')
   {
    $file_open = fopen(&quot;results.csv&quot;, &quot;a&quot;);
    $no_rows = count(file(&quot;results.csv&quot;));
    if($no_rows &gt; 1)
    {
     $no_rows = ($no_rows - 1) + 1;
    }
    $form_data = array(
     'sr_no'  =&gt; $no_rows,
     'name'  =&gt; $name
    );
    fputcsv($file_open, $form_data);
    $error = '&lt;label class=&quot;text-success&quot;&gt;Thank you for contacting us&lt;/label&gt;';
    $name = '';
   }
  }
  ?&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function(){
          $(&quot;#myModal&quot;).modal('show');
      });
  &lt;/script&gt;
  &lt;script&gt;
      $('#submit').submit(function(e) {
      e.preventDefault();
      // Coding
      $('#myModal').modal('hide'); //or  $('#IDModal').modal('hide');
      return false;
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;myModal&quot; class=&quot;modal fade&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot;&gt;Check In to Receive Credit&lt;/h5&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;p&gt;Sign In&lt;/p&gt;
                  &lt;form method=&quot;post&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;text&quot; name=&quot;name&quot; class=&quot;form-control&quot; placeholder=&quot;Name&quot;&gt;
                      &lt;/div&gt;
                      &lt;button type=&quot;submit&quot; name=&quot;submit&quot; class=&quot;btn btn-primary&quot; value=&quot;Submit&quot;&gt;Sign In&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>