Page gets reloaded after clicking the submit button

Question

$(document).ready(function() {
  $("submit").click(function(event) {
    event.preventDefault();
  });
});

function norefresh() {
  return false;
}

<form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
  <div class="form-group">
    <div class="row">
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lname1">NAME OF THE LANDLORD</label>
        <input type="text" class="form-control" id="lname" name="lname"></div>
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lpan1">PAN OF LANDLORD</label>
        <input type="text" class="form-control" id="lpan" name="lpan">
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="row">
      <div class="col-xs-6 col-md-6 form-group">
        <label for="ladd1">ADDRESS OF LANDLORD</label>
        <input type="text" class="form-control" id="ladd" name="ladd">
      </div>
      <div class="col-xs-6 col-md-6 form-group">
        <label for="lacc1">ACCOMODATION ADDRESS</label>
        <input type="text" class="form-control" id="lacc" name="lacc">
      </div>
    </div>
  </div>

  <input type="submit" class="btn btn-primary pull-right" name="submit" value="Add New" onClick="getintotab();resetform();return false;" />
  <br> <br>
</form>
</div>
<?php
 if(isset($_POST['submit'])){
  $sql1 = $db->query("INSERT INTO Landlord(name, landlord_pan, landlord_address, acc_address) VALUES ('".$_POST["lname"]."','".$_POST["lpan"]."','".$_POST["ladd"]."','".$_POST["lacc"]."')");
 
  if($sql1 == TRUE){
   echo "";
  } 
  else{
   echo "Error: " . $sql1 . "<br>" . mysqli_error($db);
  }
 }
?>

The php script on clicking the submit button sends the form data to a mysql database and the getintotab() function stores the form value on the same page in a table resetform() resets the form but on clicking the submit button the page gets reloaded.
I have already tried the following:

1. norefresh()
2. preventdefault()
3. making the input type as button instead of submit

Still no luck

Answer 1

You need to use event.preventDefault() but your selector "submit" won't match anything.

Either add an identifier to your submit button:

<input type="submit" id="submit" ... >

Then use that as your selector:

  $("#submit").click(function(event) {
    event.preventDefault();
    # You should add the other function calls here 
    # instead of having function calls in two separate places.
  });

---

Or add an identifier to your form:

<form id="form" ... >

Then add a listener for the submit action (the way I'd recommend):

  $("#form").submit(function(event) {
    event.preventDefault();
    # You should add the other function calls here 
    # instead of having function calls in two separate places.
  });

Answer 2

You are hitting server with a http request (form submit). This will result in page reload.

You should hit server by an XmlHttpRequest i.e AJAX call to get/post data from/to server respectively. This refreshes only part of page and does not reload complete page. Hope this helps.

Answer 3

I think you can remove onClick="getintotab();resetform();return false;" and use all js stuff in jquery selector and it will work for you.

Answer 4

you should use this trick:

<input type="submit" class="btn btn-primary pull-right" name="submit" value="Add New" />

to

<input type="button" class="btn btn-primary pull-right" name="submit" value="Add New" />

Hope this helps.