Mengambil Parameter URL dengan Javascript

Form-HTML

Form-HTML

Metode pengiriman data lewat form HTML bisa dilakukan dengan 2 cara, yakni Method Get dan Method Post.

Perbedaannya adalah dengan method=post maka data dikirim tidak melalui URL, tapi melalui HTTP Request. Method=post memang lebih aman dan sangat direkomendasikan. Namun ada kalanya kita cukup memerlukan method=get untuk mengambil data yang dikirim lewat URL.

Sebagai contoh kita coba buat sebuah form dengan coding HTML sebagai berikut.

<html>
<head>
<title>Form Pendaftaran</title>
<style>
fieldset{width:400px;border-color:#ff0000;border-style: solid;}
label,textarea{display:inline-block;vertical-align:middle;}
label {display:inline-block;width:100px;height:25px;}
</style>
</head>
<body>
<form id="formTes" name="formTes" action="tesform.html" method="get">
<fieldset><legend>Formulir Pendaftaran</legend>
<label>Nama:</label>
<input type="text" name="nama" maxlength="40" size="40" /><br/>
<label>Alamat:</label>
<textarea rows="3" cols="30" name="alamat"/></textarea><br/>
<label>Kota:</label>
<input type="text" name="kota" maxlength="20" size="20" /><br/>
<label>Kode Pos:</label>
<input type="text" name="kodepos" maxlength="5" size="6" /><br/>
<label>e-mail:</label>
<input type="text" name="email" size="40"/>
<p><input type="submit" value="Kirim" /></p>
</fieldset>
</form>
</body>
</html>

Simpan coding itu dengan nama file form.html lalu buat file baru dengan nama tesform.html.

Copy paste coding berikut ini ke dalam file tesform.html.

<html>
<body>
<h1>
<script type='text/JavaScript'>
//ambil URL
var url = window.location.toString();
//ambil bagian parameternya
url.match(/\?(.+)$/);
var params = RegExp.$1;
// pisahkan parameter URL ke associative array
var params = params.split("&");
var queryStringList = {};
for(var i=0;i<params.length;i++)
{	var tmp = params[i].split("=");
	queryStringList[tmp[0]] = unescape(tmp[1]);
}
// tampilkan isi associative array
for(var i in queryStringList)
{	var res = queryStringList[i].replace(/[+]/g, " ");
	document.write(i+" = "+res+"<br/>");
}
</script>
</h1>
</body>
</html>

Coba jalankan file form.html dam isilah form HTML tersebut lalu submit. Maka akan tampil hasil isian form tersebut.

Hasil Submit Form

Hasil Submit Form

Selamat mencoba. semoga berhasil.

Leave a Reply

Your email address will not be published. Required fields are marked *