Prevent Bootstrap Modal Window from Closing on Form Submission

$(document).ready(function() {  $("form").submit(function() {    Fname = $("input[name='fname']").val();    Lname = $("input[name='lname']").val();    Address = $("input[name='address']").val();
    console.log("First Name " + Fname);    console.log("Last Name " + Lname);    console.log("Address " + Address);
    return false;  })});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- Optional Bootstrap theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#shipping">  Launch demo modal</button>
<div class="modal fade" id="shipping" role="dialog">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal">×</button>        <h1 id="modalHeader" class="modal-title"></h1>      </div>      <div align="center" id="imageinfo" class="modal-body">        <div>          <h3 id="modalHeader"><strong>Shipping Information</strong></h3>          <br />
          <form action="index.php" target="_blank" method="post">            <label><b>First Name</b></label>            <br />            <input type="text" placeholder="Enter First Name" name="fname" required>            <br /><br />            <label><b>Last Name</b></label>            <br />            <input type="text" placeholder="Enter Last Name" name="lname" required>            <br /><br />            <label><b>Address</b></label>            <input type="address" placeholder="Enter Address" name="address" required>            <br />            <div class="modal-footer">              <input type="submit" class="btn btn-default" value="Confirm Address" data-dismiss="static">              <button class="btn btn-default invoice">Final Invoice</button>              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>            </div>          </form>        </div>      </div>    </div>  </div></div>

Prevent bootstrap modal from closing on submit button click

Just change the type of the button to button will prevent the submit :

<button type="button" class="btn btn-success" id="btnUpdate" style="margin-right:10px">Update</button>

Hope this helps.

Update :

To profit from HTML5 validation when you're using submition by ajax you could use checkValidity() method.

The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then returns false.

So your code will be :

$("#btnUpdate").on("click", function (e) {
  // reset the message...
  $("#errorMessage").html("");

  if($("form")[0].checkValidity()) {
    // get the value...
    var myParam = $("#someSelection").attr("someData");
    var myParamData = JSON.parse(myParam );

    updateData(myParamData.Name)
      .done(function (result) {
      if (!result.d == "") {
        $("#errorMessage").html(result.d);
        e.preventDefault();
      }
      else {                     
        loadData();
      }
    });
  }else{
    console.log("invalid form");
  }
});

Prevent Modal from closing on click submit

You can simply .val() jQuery to get the value of your notes. I would not rec-emend mixing up the jQuery and JS together to avoid confusion.

The reason your modal was still hiding that you have data-dismiss="modal" in your modal reject button.

I have simplified your code and is working. If you do not put anything in notes area it will hide the modal or else it will stay and you can do the rest of stuff there.

Also using inline CSS is not a good practice. Bootstrap allow a lot of native class to used do you can want label * red you can just used text-danger class to do that instead of inline CSS.

You can read more on bootstrap Modal and other details here

Run snippet below to see it working.

$('#modal_reject').on('click', '#submit', function(event) {
  event.preventDefault();

  //get notes
  var notes = $('#notes_reject_scv').val();

  //if notes are empty hide the modal
  if (!notes) {
    $('#modal_reject').modal('hide')
    console.log('Notes were empty! Modal disappeared')
    return false;
  }
})

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_reject">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="modal_reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group has-error">
        <label class="control-label"> Add Note <span class="text-danger">*</span></label>
          <textarea id="notes_reject_scv" name="NOTES" class="form-control" required style="height: 100px;"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="submit" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 $('#button').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#IDModal').modal('toggle'); //or  $('#IDModal').modal('hide');
    return false;
});