单击提交按钮后页面被重新加载

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 ie 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.