Set Nilai Berdasarkan URL pada Address Bar

Pembaharuan 2018/05/04: Query String Parser

Beberapa situs memiliki kemampuan untuk mengeset formulir-formulir mereka berdasarkan URL

Setelah sekian lama merasa penasaran tentang bagaimana cara Google Translate mengeset nilai pada formulir mereka berdasarkan URL, akhirnya Saya menemukannya! Fungsi ini digunakan untuk mengambil queri dari URL yang nantinya bisa kita gunakan untuk mengeset/menentukan nilai dari sebuah formulir atau apa saja berdasarkan queri pada URL:

function getUrlQueryString(param) {
    var outObj = {};
    var qs = window.location.search;
    if (qs !== "") {
        qs = decodeURIComponent(qs.replace(/\?/, ""));
        var paramsArray = qs.split("&");
        var length = paramsArray.length;
        for (var i = 0; i < length; ++i) {
            var nameValArray = paramsArray[i].split("=");
            nameValArray[0] = nameValArray[0].toLowerCase();
            if (outObj[nameValArray[0]]) {
                outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
            } else {
                if (nameValArray.length > 1) {
                    outObj[nameValArray[0]] = nameValArray[1];
                } else {
                    outObj[nameValArray[0]] = true;
                }
            }
        }
    }
    var retVal = param ? outObj[param.toLowerCase()] : qs;
    return retVal ? retVal : "";
}

Pembaharuan: 12 Juni 2012

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return (false);
}

getQueryVariable('name');
getQueryVariable('url');
getQueryVariable('email');

Lebih sederhana.

Katakanlah kita memiliki URL seperti ini:

http://www.sitename.com?name=Taufik%20Nurrohman&url=http://latitudu.blogspot.com&email=mamamia@email.com

Dengan menggunakan fungsi di atas kita bisa mengambil karakter Taufik Nurrohman, http://latitudu.blogspot.com dan mamamia@email.com dari URL untuk diambil sebagai variabel, sehingga kita bisa mengeset nilai atribut suatu formulir atau elemen berdasarkan URL pada address bar seperti ini:

JavaScript

var username = getUrlQueryString("name"),
    usersite = getUrlQueryString("url"),
    usermail = getUrlQueryString("email");

document.getElementById('name').value = username;
document.getElementById('site').value = usersite;
document.getElementById('mail').value = usermail;
document.getElementById('view').src = usersite;

HTML

<input id="name" type="text" value="">
<input id="site" type="text" value="">
<input id="mail" type="text" value="">
<iframe id="view" src=""></iframe>

Sebagai contoh, di sini terdapat tiga buah URL yang sama namun dengan queri yang berbeda. Coba Anda kunjungi satu persatu. Saya harap Anda mengerti apa yang Saya maksudkan setelah ini:

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman&url=http://lie-out.blogspot.com

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Mei%20Sari%27ah&url=http://ra-miftahul-jannah.blogspot.com

http://tovic.github.com/dte-project/demo-javascript-set-value-from-url.html?name=Taufik%20Nurrohman%20Saja&url=http://dte-feed.blogspot.com

Contoh nyata mengenai manfaat kode ini adalah untuk menciptakan alat-alat seperti Responsive Site Tester yang memiliki kemampuan untuk menyimpan data ke dalam queri URL, sehingga kita bisa menggunakan URL tersebut sebagai URL berbagi.

---

Referensi: Stack Overflow – Posting Data Into JavaScript From an URL