Skip to content

Instantly share code, notes, and snippets.

@dwijonarko
Last active October 28, 2019 04:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dwijonarko/fe3deccf42557a152c69dd466176bec5 to your computer and use it in GitHub Desktop.
Save dwijonarko/fe3deccf42557a152c69dd466176bec5 to your computer and use it in GitHub Desktop.
AJAX - 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX - 1</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ajax Form</h1>
<form action="save.php" method="post" id="form-biodata">
<div class="form-group row">
<label for="first" class="label col-2">Nama Depan</label>
<div class="col-8">
<input type="text" name="first" id="first" class="form-control" autocomplete="off" required>
</div>
</div>
<div class="form-group row">
<label for="last" class="label col-2">Nama Belakang</label>
<div class="col-8">
<input type="text" name="last" id="last" class="form-control" autocomplete="off" required>
</div>
</div>
<form-group class="row">
<div class="col-8 offset-md-2">
<input type="submit" value="simpan" class="btn btn-primary">
<input type="reset" value="batal" class="btn btn-warning">
</div>
</form-group>
</form>
</div>
<script>
$("#form-biodata").submit(function(e){
e.preventDefault();
var action = $(this).attr('action');
var method = $(this).attr('method');
var form_data = $(this).serialize();
$.ajax({
url:action,
type:method,
data:form_data
}).done(function(response){
alert(response);
$("#first").val('');
$("#last").val('');
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX - 1</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 id="heading">Ajax</h1>
<button id="button" class="btn btn-success">Click!</button>
<button id="reset" class="btn btn-danger">Reset!</button>
</div>
<script>
$(document).ready(function(){
$("#button").click(function(){
$.ajax({
url:"test.php"
}).done(function(result) {
$("#heading").html(result);
});
});
$("#reset").click(function(){
$("#heading").html('Ajax');
});
});
</script>
</body>
</html>
<?php
$mysqli = new mysqli('localhost','root','root','poltekom_web');
$first = $_POST['first'];
$last = $_POST['last'];
$stmt = $mysqli->prepare("INSERT INTO biodata (first,last) VALUES (?,?)");
echo $mysqli->error;
$stmt->bind_param("ss",$first,$last);
if ($stmt->execute()) {
echo "Data berhasil disimpan";
} else {
echo $stmt->error;
echo "Periksa kembali form anda";
}
<?php
echo date("y-m-d h:i:s");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment