insert query with ajax without reloading whole page

Question

I want to insert data through AJAX (without reload page). I tried but it is not showing data and also reload page.

I have a file first.php (in which, fo

Answer 1

After $("#submit").click(function(event){ add command

event.preventDefault();

And your page will not be reloaded

Answer 2

The submit button will automatically reload the page on click so the solution is either change the button type to button or add preventDefault to the click event

$("#submit1,#submit2").click(function() {
  alert('form submited')
})
$("#submit3").click(function(e) {
  e.preventDefault();
  alert('form submited')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  this will reload the page
  <input type="submit" class="pull-right btn btn-warning" value="Submit" id="submit1">
</form>

<form>
  this will not reload the page
  <input type="button" value="Submit" id="submit2">
</form>


<form>
  this will not reload the page
  <input type="submit" value="Submit" id="submit3">
</form>