How can I stop the Bootstrap Modal popup from closing during a submit of data to db?

Question

I have a commenting system that sits within a Bootstrap Modal, all works fine in terms of pulling data from the database, and the ability to enter data. the problem is on Submit.

This below is my code for the submit.

$(document).ready(function(){
var form = $('form');
var submit = $('#submit');

form.on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: 'projectnoteuploads.php',
        type: 'POST',
        cache: false,
        data: form.serialize(),
        success: function(data){
            console.log(data);
            var item = $(data).hide().fadeIn(800);
            $('.comment-block').append(item);
        },
        error: function(e){
            alert(e);
        }
    });
});
});

myjobspage.php - this is the start of my modal on my main page, it's called from the Notes button

<div id="projnotes" class="modal fade modal-scroll" tabindex="-1" data-width="960">
</div>

I originally had the rest of the modal within the div above, but as I was having this issue of it closing the form and refreshing the page, I decided to move the modal onto another page, and have it called when the button is clicked, but still having the same issue

This is the modal code

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Project Notes</h4>
 </div>
    <div class="modal-body">
    <div class="row">
    <div class="col-md-12">
        <!-- Table shown here (no need to show as not involved) -->
    </div>
</div>
<div class="row">
<div class="col-md-12">
    <!--comment form -->
    <form class="notesform" id="notesform" name="notesform" method="post">
        <!-- need to supply post id with hidden fild -->
        <input type="hidden" name="postid" value="<?php echo $propid; ?>">
        <input type="hidden" name="projno" value="<?php echo $projectno; ?>">
        <input type="hidden" name="name" value="<?php echo $inputby; ?>">
        <div class="col-md-12 ">
            <div class="form-group">
                <label for="inputEmail12" class="col-md-2 control-label">Project Notes *</label>
                <div class="col-md-8">
                    <textarea class="form-control col-md-8" rows="3" name="comment" id="comment"placeholder="Type your comment here...." required></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <br>
                    <input type="submit" class="btn green" id="savenotes" name="submit"  value="Submit Comment" />                        
                </div>
            </div>
        </div>
    </form>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>

One question on this though is that to call the jquery/Ajax code is done through my main page, is this right or should it be done through the page that the Model body is on?

When the Submit button id="savenotes" is clicked, the modal closes and refreshes the page losing all data within the main page.

How can I submit data to the database without the Modal closing?

Answer 1

I don't know if you've found an answer to this but at least for others who might need solutions just like I once did.

This is the modal page named modal.php:

  <div id="projnotes" class="modal fade modal-scroll" tabindex="-1" 
     data-
  width="960">
  <!-- div wrapper for modal dialog -->
  <div class="modal-dialog">
  <!-- div wrapper for modal content -->
  <div class="modal-content">

 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-
  hidden="true"></button>
 <h4 class="modal-title">Project Notes</h4>
  </div>
  <!-- I guess you wanted your body centered .justify-content-center 
  should fix that -->
 <div class="modal-body justify-content-center">
 <div class="row">
  <div class="col-md-12">
      <!-- Table shown here (no need to show as not involved) -->
  </div>
 </div>
  <!-- I guess you wanted your form centered .justify-content-center 
   would fix that -->
 <div class="row justify-content-center">
    <!--comment form -->
 <form class="notesform form-block" id="notesform" name="notesform" 
 method="post" action="projectnoteuploads.php">
  <!-- need to supply post id with hidden fild -->
  <input type="hidden" name="postid" value="<?php echo $propid = 
 'propid'; //replace variable $propid ?>">
  <input type="hidden" name="projno" value="<?php echo $projectno = 
    'projectno'; //replace variable $projectno ?>">
  <input type="hidden" name="name" value="<?php echo $inputby = 
      'inputby'; //replace variable $inputby ?>">
  <div class="form-group">
    <label for="comment" class="control-label">Project Notes *</label>
     <textarea class="form-control form-control-md" rows="3" cols="25" 
   name="comment" style="resize: none;" id="comment" placeholder="Type 
    your comment here...." required></textarea>
  </div>
  <input type="submit" class="btn btn-success" id="savenotes" 
  name="submit"  value="Submit Comment" />
  </form>
      </div>
 <!-- I can't find where your Comments are appended
 to, so I placed them here using the
  class name 'comment-block' as you used in your script -->
  <div class="row justify-content-center">
    <div class="comment-block"></div>
    </div>
   </div>
   <div class="modal-footer">
   <button type="button" data-dismiss="modal" class="btn btn-
   default">Close</button>
  </div>
  </div>
  </div>
  </div>

Then this is your myjobspage.php where you will include the modal.php

     <?php
   include 'modal.php';
     ?>
    <!DOCTYPE html>
   <html>
   <head>
    <meta charset="utf-8">
    <title>Myjobspage</title>
    <link rel="stylesheet" 
    href="path/to/bootstrap4.0.0/dist/css/bootstrap.min.css">
    <script src="path/to/Jquery_3.2.1/jquery-3.2.1.js"></script>
    <script src="path/to/bootstrap-
                  4.0.0/assets/js/vendor/popper.min.js">
       </script>
    <script src="path/to/bootstrap-4.0.0/dist/js/bootstrap.min.js">
     </script>
   </head>
   <body>
     <!-- Some Code Here-->
    <!-- Button to Launch Modal. Replace appropriately-->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
   data-target="#projnotes">
       Launch  Comments Modal
     </button>
     <!-- some other code -->
     <!-- script to trigger your modal.php -->
    <script src="modalScript.js"></script>
    <script src="path/to/bootstrap-4.0.0/js/dist/util.js"></script>
     <script src="path/to/bootstrap-4.0.0/js/dist/modal.js"></script>
    </body>
    </html>

This is the script modalScript.js that will make the request to projectnoteuploads.php via the ajax method.

 $(document).ready(function(){

  $('form').on('submit', function(e) {

   e.preventDefault();
   $.ajax({
    url: 'projectnoteuploads.php',
    type: 'POST',
    cache: false,
    data: $('form').serialize(),
    success: function(data){
        console.log(data);
        //This I guess was where the error was in the previous code.
     $('.comment-block').append(data).hide().fadeIn(800);
     $('textarea').val(''); //This will wipe out the textarea after 
    //comment input 

   },
    error: function(e){
        alert(e);
               }
           });
        });
     });

Please take note, the codes have all being modified from the question, I tried it and it works.