阻止模式显示在页面加载中

Question

I have a PHP search page which querys a database. The results are shown on the same page in a bootstrap modal. It works perfectly, except when the page loads, the modal shows automatically without input. If I close the modal and submit a search, it works great. any suggestions?

here is the form

<form  id="myForm" method="post">
     <div class="form-group">
       <label class = "label-default"for="firstname">enter your first name</label>
            <input type="text" name="firstname" placeholder="First Name" id="firstname" required=""  oninvalid="this.setCustomValidity ('Please enter first name')" oninput= "setCustomValidity('')"/>
            </div>
          <label name="lastname">enter your last name</label>
       <input type="text" name="lastname" placeholder="Last Name" required=""oninvalid="this.setCustomValidity ('Please enter last name')" oninput= "setCustomValidity('')" />

     <button   class="btn btn-primary"  type="submit"   value="search" >Check Seniority</button>
     <button class="btn btn-outline-primary"  type="reset" name="reset" id ="reset" value="reset">Reset</button>
</form>

and here is the script I am using

<script>



$(document).ready(function(){ 
  $("#myForm").submit(function(event){
    submitForm();
    return false;
  });
});
 $(function(){

          $('#myModal').modal('show');
          return false;
     });
;
  </script>

Answer 1

$(function() { ... }); is shorthand of $(document).ready(function(){}) and runs on document ready state.

I don't know what is submitform() in your codes. If it is the function to show modal and perform a search then this is the right way to call this function:

<script>
$(document).ready(function(){ 
  $("#myForm").submit(function(event){
    submitForm();
    return false;
  });
});

function submitform(){
     $('#myModal').modal('show');
     // and also post some data to the modal to perform search and finally:
     return false;
});
</script>