• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial membuat Submit Form Email dengan jQuery dan PHP tanpa harus Refresh Halaman Web

15‘11
February

noimg.jpg

jQuery sangat memudahkan kita dalam menggunakan AJAX, salah satu kemudahan yang di berikan adalah kita dapat melakukan validasi data yang di input user melalui form sampai dengan user melakukan submit form tersebut tanpa harus merefresh halaman. Saya akan menunjukan kepada anda mudahnya pembuatan submit form untuk email tanpa merefresh seluruh halaman dengan menggunakan jQuery

Yang akan kita bangun pada tutorial kali ini adalah sebuah form sederhana dengan kolom nama, email, dan isi pesan. Semua kolom akan di submit ke dalam sebuah script php, untuk melakukan ini kita tidak perlu menambah plugin lain cukup dengan native jQuery

Gambar jQuery Submit Form

Demo Tutorial

Langkah pertama buatlah sebuah form submit dengan HTML seperti contoh di bawah

<div id="content">
	<form name="contact_form" id="contact_form" action="#">
		<fieldset>
			<label for="name" id="name_label">Nama</label>
			<input type="text" name="name" id="name" size="30" value="" />
			<label for="email" id="email_label">Email</label>
			<input type="text" name="email" id="email" size="30" value="" />
			<label for="message" id="message_label">Pesan</label>
			<textarea name="message" id="message" ></textarea>
			<label class="error" for="all" id="error">Kolom input data wajib di isi</label> 
			<br />
			<input type="submit" name="send_btn" class="button" id="send_btn" value="Send" /> 
			<img src="http://w3function.com/images_tutor/ajax-loader.gif" class="loader" alt="" style="display:none" />
			<label class="result" id="result"></label>
		</fieldset>
	</form>
</div>

Setelah selesai, langkah berikutnya adalah mendefinisikan variable global pada jQuery berdasarkan tag HTML yang kita buat di atas

<script type="text/javascript">
$(document).ready(function(){
	//mendefinisikan variable global
	var InputName = $("#name");
	InputEmail = $("#email");
	InputMessage = $("#message");
	BtnSend = $("#send_btn");
	result = $("#result");
	error = $(".error");
	loading = $(".loader");
}); 
</script>

Selanjutnya kita tambahkan fungsi validasi untuk pengisian kolom input nama, email, dan pesan

//validasi pengisian data input
function checkForm(){
	if(InputName.attr("value") && InputEmail.attr("value") && InputMessage.attr("value")) 
		return true;
	else
		error.fadeIn("fast");
		return false;
}

setelah membuat fungsi validasi selanjutnya kita tambahkan fungsi AJAX untuk proses submit data form

 $("#contact_form").submit(function(){ //pada saat form di submit proses AJAX adalah sebagai berikut
	if(checkForm()){
	var name = InputName.attr("value");
	email  = InputEmail.attr("value");
	message  = InputMessage.attr("value");
	
	BtnSend.attr({ disabled:true, value:"Sending..." });
	loading.fadeIn();
	
	$.ajax({
		type: "POST", 
		url: "JQinputform_proc.php", 
		data: "action=send_mail&name=" + name + "&email=" + email + "&message=" + message,
		complete: function(data){
			result.html(data.responseText);
			result.slideDown("fast");
			loading.fadeOut();
			error.fadeOut();
			BtnSend.attr({ value:"Send" });
		}
	});
	}
	// tambahkan return false untuk mencegah double submit dan supaya data tidak di refresh setelah submit data berhasil
	return false;
});

Sehingga total keseluruhan kode jQuery untuk melakukan validasi data yang di input user melalui form sampai dengan user melakukan submit form tersebut tanpa harus merefresh halaman adalah sebagai berikut :

<script type="text/javascript">
$(document).ready(function(){
	//mendefinisikan variable global
	var InputName = $("#name");
	InputEmail = $("#email");
	InputMessage = $("#message");
	BtnSend = $("#send_btn");
	result = $("#result");
	error = $(".error");
	loading = $(".loader");

	//validasi pengisian data input
	function checkForm(){
	if(InputName.attr("value") && InputEmail.attr("value") && InputMessage.attr("value")) 
		return true;
	else
		error.fadeIn("fast");
		return false;
	}

	$("#contact_form").submit(function(){ //pada saat form di submit proses AJAX adalah sebagai berikut
		if(checkForm()){
			var name = InputName.attr("value");
			email  = InputEmail.attr("value");
			message  = InputMessage.attr("value");
			
			BtnSend.attr({ disabled:true, value:"Sending..." });
			loading.fadeIn();
			
			$.ajax({
				type: "POST", 
				url: "JQinputform_proc.php", 
				data: "action=send_mail&name=" + name + "&email=" + email + "&message=" + message,
				complete: function(data){
					result.html(data.responseText);
					result.slideDown("fast");
					loading.fadeOut();
					error.fadeOut();
					BtnSend.attr({ value:"Send" });
				}
			});
		}
		// tambahkan return false untuk mencegah double submit dan supaya data tidak di refresh setelah submit data berhasil
		return false;
});

Selanjutnya untuk menampilkan hasil atau response dari fungsi submit form diatas buatlah sebuah file PHP dengan nama JQinputform_proc.php, isi dari script PHP adalah sebagai berikut

<?php
	if ($_POST["action"]=="send_mail"){
		$name=$_POST["name"];
		$email=$_POST["email"];
		$message=$_POST["message"];
		echo "<p>Nama :<br /> $name</p><br />
			 <p>Email :<br /> $email</p><br />
			 <p>Pesan : <br />$message</p><br />
			 <p>Data Berhasil Dikirim Cheers</p>";
	}
?>

Langkah terakhir tambahkan CSS untuk form submit yang telah kita buat sehingga tampilannya cukup okay, berikut ini merupakan contoh css yang saya buat untuk form diatas

* { margin:0; padding:0; outline:none; }
body { font-size:62.5%; 
	font-family:Arial, Helvetica, sans-serif; 
	background: #000 url(http://w3function.com/images_tutor/background.jpg) no-repeat; position:relative; margin:100px 0 0 0;  }
#content { 
	width:300px; 
	margin:0 auto; 
	padding:10px 5px 20px 5px; 
	border:3px solid #555;
	-moz-border-radius:20px; 
	background:#000;
}
form fieldset { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:1.2em; 
	margin:0 auto; 
	width:300px; 
	position:relative; 
	border:0;
	display:block; 
	padding: 0px 10px 8px; 
}
form fieldset legend { 
	border-width:1px; 
	border-style:solid; 
	border-color:#BBBB66; 
	color:#3D7169; 
	font-weight:bold; 
	font-variant:small-caps; 
	font-size:140%; 

	padding:4px 8px;
	margin:0px 0px 10px 0px; 
	position:relative; top: -12px; 
	background:white; 
}
label { 
	font-size:90%; 
	display:block; 
	width:220px; 
	text-align:left;
	color:#ffd; 
	font-weight:bold;
	padding:15px 0 5px 0px; 
}
label.error { 
	color:red;
	text-align:center;
	margin:10px 0 0 0;
	padding:3px 10px;
	font-size:10px;
	font-weight:bold;
	border:1px solid #FF6633;
	display:none;
}
label.result { 
	color:#7cda20;
	text-align:left;
	margin:10px 0 0 0;
	padding:5px 10px;
	border:1px solid #aff130;
	display:none;
}
input[type=text] { padding:2px 0;color:#000; -moz-border-radius:3px;  }
textarea { padding:2px 0;color:#000; width:250px; -moz-border-radius:3px;  }
input.button { 
	padding:3px 15px;
	border:2px solid #fff; 
	margin:20px 0px 0px 0px; 
	color:#3D7169;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#CCC; 
	-moz-border-radius:5px; 
}
input.button:hover { 
	background:#009FAA none repeat scroll 0% 0%; 
	color:white; 
}

Dengan demikian maka keseluruhan script dapat anda lihat disini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Submit Form With jQuery</title>
<script type="text/javascript" src="http://w3function.com/java/jquery-1.3.2.min.js"></script>
<style type="text/css">
* { margin:0; padding:0; outline:none; }
body { font-size:62.5%; 
	font-family:Arial, Helvetica, sans-serif; 
	background: #000 url(http://w3function.com/images_tutor/background.jpg) no-repeat; position:relative; margin:100px 0 0 0;  }
#content { 
	width:300px; 
	margin:0 auto; 
	padding:10px 5px 20px 5px; 
	border:3px solid #555;
	-moz-border-radius:20px; 
	background:#000;
}
form fieldset { 
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:1.2em; 
	margin:0 auto; 
	width:300px; 
	position:relative; 
	border:0;
	display:block; 
	padding: 0px 10px 8px; 
}
form fieldset legend { 
	border-width:1px; 
	border-style:solid; 
	border-color:#BBBB66; 
	color:#3D7169; 
	font-weight:bold; 
	font-variant:small-caps; 
	font-size:140%; 
	padding:4px 8px;
	margin:0px 0px 10px 0px; 
	position:relative; top: -12px; 
	background:white; 
}
label { 
	font-size:90%; 
	display:block; 
	width:220px; 
	text-align:left;
	color:#ffd; 
	font-weight:bold;
	padding:15px 0 5px 0px; 
}
label.error { 
	color:red;
	text-align:center;
	margin:10px 0 0 0;
	padding:3px 10px;
	font-size:10px;
	font-weight:bold;
	border:1px solid #FF6633;
	display:none;
}
label.result { 
	color:#7cda20;
	text-align:left;
	margin:10px 0 0 0;
	padding:5px 10px;
	border:1px solid #aff130;
	display:none;
}
input[type=text] { padding:2px 0;color:#000; -moz-border-radius:3px;  }
textarea { padding:2px 0;color:#000; width:250px; -moz-border-radius:3px;  }
input.button { 
	padding:3px 15px;
	border:2px solid #fff; 
	margin:20px 0px 0px 0px; 
	color:#3D7169;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#CCC; 
	-moz-border-radius:5px; 
}
input.button:hover { 
	background:#009FAA none repeat scroll 0% 0%; 
	color:white; 
}
</style>
</head>
<body>
<div id="content">
	<form name="contact_form" id="contact_form" action="#">
	<fieldset>
		<label for="name" id="name_label">Nama</label>
		<input type="text" name="name" id="name" size="30" value="" />
		<label for="email" id="email_label">Email</label>
		<input type="text" name="email" id="email" size="30" value="" />
		<label for="message" id="message_label">Pesan</label>
		<textarea name="message" id="message" ></textarea>
		<label class="error" for="all" id="error">Kolom input data wajib di isi</label> 
		<br />
		<input type="submit" name="send_btn" class="button" id="send_btn" value="Send" /> 
		<img src="http://w3function.com/images_tutor/ajax-loader.gif" class="loader" alt="" style="display:none" />
		<label class="result" id="result"></label>
	</fieldset>
	</form>
</div>
<script type="text/javascript">
 $(document).ready(function(){
	//mendefinisikan variable global
	var InputName = $("#name");
	InputEmail = $("#email");
	InputMessage = $("#message");
	BtnSend = $("#send_btn");
	result = $("#result");
	error = $(".error");
	loading = $(".loader");

	//validasi pengisian data input
	function checkForm(){
	if(InputName.attr("value") && InputEmail.attr("value") && InputMessage.attr("value")) 
		return true;
	else
		error.fadeIn("fast");
		return false;
	}

	$("#contact_form").submit(function(){ //pada saat form di submit proses AJAX adalah sebagai berikut
		if(checkForm()){
			var name = InputName.attr("value");
			email  = InputEmail.attr("value");
			message  = InputMessage.attr("value");
			
			BtnSend.attr({ disabled:true, value:"Sending..." });
			loading.fadeIn();
			
			$.ajax({
				type: "POST", 
				url: "JQinputform_proc.php", 
				data: "action=send_mail&name=" + name + "&email=" + email + "&message=" + message,
				complete: function(data){
					result.html(data.responseText);
					result.slideDown("fast");
					loading.fadeOut();
					error.fadeOut();
					BtnSend.attr({ value:"Send" });
				}
			});
		}
		// tambahkan return false untuk mencegah double submit dan supaya data tidak di refresh setelah submit data berhasil
		return false;
});
</script>
</body>
</html>

Selamat mencoba dan terima kasih untuk jQuery

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial Efek Animasi Visual jQuery untuk Web Desainer - Accordion dan Pergantian Gambar pada Galeri
  2. jQuery 2.0 Sudah Resmi Di Luncurkan
  3. Membuat Drop Down Menu Sederhana dengan jQuery
  4. Tutorial Efek Animasi Visual jQuery untuk Web Desainer - Panel Geser, Mengilangkan Elemen seperti DIV dan Transisi Berantai
  5. Pengantar dan Penggunaan jQuery pada Website

Komentar

  • phyantd (26 Oct 2016 04:33:29)

    keren banget... jngn lupa mampir di blog saya phyantd games

  • dw (04 Aug 2016 09:32:07)

    hai tampan

  • san (10 Jun 2016 02:42:25)

    okee sip. trus kalau menambahkan untuk input image bisa gak?

  • hendra (28 May 2016 10:09:29)

    sangat bermanfat gan...ijin dicoba.

  • sinta (19 Jan 2016 10:03:13)

    Terimakasih, artikelnya bermanfaat banget %u2026

    Kamu butuh tutorial yang menggunakan bahasa Indonesia? Pusing cari dimana? Kunjungi <a href="http://primaindisoft.com/tutorial.php"> Kumpulan Tutorial Gratis </a> Tutorial berbahasa Indonesia, yang bisa membantu kamu melakukan aktivitas sehari-hari

» Muat Komentar Sebelumnya (24 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff