title: My Ajax script not hide Bootstrap Modal after submit
body: <p>I have a page that display 6 Bootstrap Cards in 3 columns. Each Bootstrap card display an image, name, discribe and a footer button. When user click on Bootstrap Card footer button, a Bootstrap Modal open with a Sql row data by ID and into this Bootstrap Modal, has 2 inputs and one textarea form that are described below:</p>
  
  <pre><code>1. &lt;input type="text" name="name" id="name" class="form-control" required /&gt;
  
  2. &lt;input type="email" name="email" id="email" class="form-control" required /&gt;
  
  3. &lt;textarea class="form-control" type="text" name="message" id="message" rows="3"  
  required&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>To open Modal with respect ID, i inserted a PHP code in button card code like below:</p>
  
  <pre><code>&lt;button type="button"  class="btn btn-block btn-primary" data-toggle="modal" 
  data-target="#dataModal&lt;?php echo $record['ID']; ?&gt;"&gt;View Details&lt;/button&gt;
  
  </code></pre>
  
  <p>Where <code>&lt;?php echo $record['ID']; ?&gt;</code> is related to SQL row ID.</p>
  
  <p>When user fills form and click on Modal submit button, all data are sent to database, and this is ok, but Bootstrap Modal not hide after Ajax success. </p>
  
  <p>The Ajax script that i use to insert data through php code (insert.php) in database is:</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript" &gt;
  
  $(document).on('submit', '#contactForm', function(event){
          event.preventDefault();
      $.ajax({
                  url:"insert.php",
                  method:'POST',
                  data:new FormData(this),
                  contentType:false,
                  processData:false,
                  success:function(data){
                      alert("Message sent!");                 
                      $("#contactForm")[0].reset();
                      $('#dataModal').hide();
                      $(".modal-backdrop").remove();
  
                  }
  });
  });
  
  &lt;/script&gt;
  
  </code></pre>
  
  <p>I think the problem is related to this line on Ajax success: <code>$('#dataModal').hide();</code> because the Bootstrap Modal html id attribute is <code>"dataModal&lt;?php echo $record['ID']; ?&gt;"</code> and not only "dataModal". </p>
  
  <p>In this case if i put like this <code>$('#dataModal&lt;?php echo $record['ID']; ?&gt;').hide();</code> nothing happens.</p>
  
  <p>Below is the complete code:</p>
  
  <pre><code>
  &lt;div class="container"&gt;
  
  &lt;?php
  include_once("includes/mysqli_connection.php");
  $sql = "SELECT * FROM products ORDER BY RAND() LIMIT 6";
  $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
  while( $record = mysqli_fetch_assoc($resultset) ) {
  ?&gt;  
  
  &lt;div class="card-deck" style="width: 18rem; display:inline-block; margin:15px;"&gt;
    &lt;div class="card"&gt;
    &lt;?php echo '&lt;img src="upload/'.$record["image"].'" class="img-thumbnail" width="286" height="180" /&gt;'; ?&gt;
      &lt;div class="card-body" align="center"&gt;&lt;h5 class="card-title"&gt;&lt;?php echo $record['ProductName']; ?&gt;&lt;/h5&gt;&lt;/div&gt;
      &lt;div class="card-footer"&gt;
        &lt;button type="button"  class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal&lt;?php echo $record['ID']; ?&gt;"&gt;View Details&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="dataModal&lt;?php echo $record['ID']; ?&gt;" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" &gt;
    &lt;div class="modal-dialog modal-lg" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;      
          &lt;h5 class="modal-title" &gt;Product: &lt;?php echo $record['productName']; ?&gt;&lt;/h5&gt; 
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
  
  &lt;div class="lead"&gt;Ask us about this product&lt;/div&gt;
  
  &lt;form id="contactForm" method="post"&gt;
  &lt;div class="form-row"&gt;
  &lt;div class="col-md-4 mb-3"&gt;
  &lt;label&gt;Name&lt;/label&gt;
       &lt;input type="text" name="name" id="name" class="form-control" placeholder="Your name" required /&gt;
  &lt;/div&gt;
       &lt;div class="col-md-5 mb-3"&gt;
       &lt;label&gt;E-mail&lt;/label&gt;
         &lt;input type="email" name="email" id="email" class="form-control" placeholder="Your e-mail" required /&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
  &lt;div class="col-md-12 mb-3"&gt;
  &lt;label&gt;Message&lt;/label&gt;
  &lt;textarea class="form-control" type="text" name="message" id="message" rows="3"  placeholder="Your message" required&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;CLOSE&lt;/button&gt;
  
           &lt;button type="submit" class="btn btn-success" id="submit" &gt;SEND&lt;/button&gt;
  &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php } ?&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" language="javascript" &gt;
  
  $(document).on('submit', '#contactForm', function(event){
          event.preventDefault();
      $.ajax({
                  url:"insert.php",
                  method:'POST',
                  data:new FormData(this),
                  contentType:false,
                  processData:false,
                  success:function(data){
                      alert("Message sent!");                 
                      $("#contactForm")[0].reset();
                      $('#dataModal').hide();
                      $(".modal-backdrop").remove();
  
                  }
  });
  });
  
  &lt;/script&gt;
  
  </code></pre>
  
  <p>In this case what could it be and what i have to do? Thanks all.</p>