Untitled

<html  lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Bootstrap</title>
	<link href = "css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p><br/></p>
<div class="container">
<p></p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button>

	<!-- Modal -->
	<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="addLabel">Insert Data</h4>
	      </div>
	      <form>
	      <div class="modal-body">
	      <div class="form-group">
			    <label for="nm">Full Name</label>
			    <input type="text" class="form-control" id="nm" placeholder="Name">
			  </div>
			  <div class="form-group">
			    <label for="em">Email</label>
			    <input type="email" class="form-control" id="em" placeholder="Sure">
			  </div>
			    <div class="form-group">
			    <label for="hp">Phone Number</label>
			    <input type="number" class="form-control" id="hp" placeholder="Telp/HP">
			  </div>
			    <div class="form-group">
			    <label for="al">Address</label>
			    <textarea class="form-control" id="al" placeholder="Alamat"></textarea>
			  </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="submit" onclick="saveData()" class="btn btn-primary">Save changes</button>
	      </div>
	  	  </form>
	    </div>
	  </div>
	</div>
	<p></p>
</div>


<script src = "js/jquery-3.1.1.js"></script>
<script src = "js/bootstrap.min.js"></script>
<script>
	function saveData(){
		var name = $('#nm').val();
		var email = $('#em').val();
		var phone = $('#hp').val();
		var address = $('#al').val();
	$.ajax({
		type: "POST",
		url: "server.php?p=add",
		data: "nm="+name+"&em="+email+"&hp="+phone+"&al="+address,
		success: function(msg){
			alert('success');
		}

	});

	}
</script>
</body>
<html>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = new PDO("mysql:host=$servername;dbname=db_ajax", $username , $password);
$page = isset($_GET[ 'p' ])?$_GET[ 'p' ]:'';
if($page=='add'){

  $name = $_POST['nm'];
  $email = $_POST['em'];
  $phone = $_POST['hp'];
  $address = $_POST['al'];
  $stmt = $db->prepare("insert into crud VALUES('',?,?,?,?)");
  $stmt->bindParam(1,$name);
  $stmt->bindParam(2,$email);
  $stmt->bindParam(3,$phone);
  $stmt->bindParam(4,$address);
  $stmt->execute()

} else if($page=='edit'){


}else if($page=='del'){


} else{


}

?>