Submit form tanpa refresh halaman dengan PHP dan jQuery

Oleh Diposting pada

Dalam tutorial Submit form tanpa refresh halaman dengan PHP dan jQuery kita memiliki form sederhana dengan nama, email & nomor telepon. Form akan disubmit dengan  script PHP tanpa merefresh halaman, menggunakan jQuery:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Post a form without page refresh PHP & jQuery</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>

		<script>
			function SubmitForm() {
				var name = $("#name").val();
				var email = $("#email").val();
				var phone = $("#phone").val();
				
				alert("Data Loaded: "+name+"\n"+email+"\n"+phone+"\nAll Data Submitted Sucessfully!");

				$.post("submit.php", { name: name, email: email, phone: phone }, function(data) {
					alert("Data Loaded: " + data);
				});
			}
		</script>
	</head>
	<body>
		<form action="submit.php"  method="post">
			Name: <input name="name" id="name" type="text" /><br />
			Email: <input name="email" id="email" type="text" /><br />
			Phone Number: <input name="phone" id="phone" type="text" /><br />
			<input type="button" id="searchForm" onclick="SubmitForm();" value="Send" />
		</form> 
	</body>
</html>

submit.php

<?php
	echo $_POST['name']."\n";
	echo $_POST['email']."\n";
	echo $_POST['phone']."\n";
	echo "All Data Submitted Sucessfully!"
?>

Demikianlah Cara Submit form tanpa refresh halaman dengan PHP dan jQuery, untuk proses penyimpanan data ke dalam database Anda dapat menambahkan codingan di file submit.php untuk menyimpannya.