28 Desember 2010

Cara Menyimpan Nilai Variabel JavaScript ke Variabel PHP

Pernah dalam suatu waktu saya bingung dengan keadaan, bagaimana cara untuk menyimpan nilai dari variabel javascript yang merupakan pemrograman di tingkat client (client-side scripting) dan dimasukkan ke dalam variabel PHP (server-side scripting)? Hal ini sangat perlu jika kita mendapatkan input data yang dimasukkan ke dalam variabel javascript, kemudian inputan tersebut akan diolah, misalnya akan dimasukkan ke dalam suatu database. Maka isi variabel javascript tersebut harus dipindahkan dulu ke variabel PHP.

Ternyata ada beberapa macam cara untuk mengatasinya, ada yang menggunakan cara dengan mengirimnya sebagai method post, atau dengan memanfaatan DOM (data object model) atau juga dengan cookies, seperti yang ditunjukkan oleh Saudara Dody di halamannya ini. Cukup panjang bukan? Sebenarnya ada cara lagi, yaitu dengan menggunakan konsep AJAX. Apa itu AJAX? Silakan dicari dan dipelajari sendiri hehee, untuk saat ini saya pun masih tingkat pemula untuk urusan AJAX. Namun, terdapat cara yang sangat simpel dan sederhana untuk mengakalinya, tidak perlu mengeryitkan dahi segala, yaitu dengan menyimpannnya ke dalam sebuah form input.

Form input dibuat sebagai mediator dari variabel javascript dan php, benar-benar tempat netral yang serba guna hahahaa [ngasal mode on]. Kalau ingin tidak terlihat form inputnya, maka typenya dapat dibuat hidden. Caranya adalah seperti yang ditunjukkan pada kode html dan script javascript & PHPnya berikut ini:

<html>
<head>
<title>passing javascript variable to php</title>

<script type="text/javascript">
function cek()
{
var varJS = "12345";
document.form1.media.value = varJS;
}

</script>
</head>

<body>

<form name="form1" id="form1" method="post" onsubmit="cek()">
<input type="hidden" id="media" name="media" value="">
<input type="submit" id="submit" name="submit" value="cek">
</form>

<?php
$varPHP = $_POST['media'];
echo "variabel javascript yang telah diisikan ke variabel php : $varPHP";
?>

</body>
</html>

Disana dimisalkan telah didapatkan nilai dari suatu variabel javascript. Kemudian langkah selanjutnya adalah mengisikan value ke form input di kode HTMLnya
document.form1.media.value = varJS;
- form1 -> nama form
- media -> nama input text

Baru kemudian nilainya diambil oleh sintaks phpnya dengan cara $varPHP = $_POST['media']; untuk dimasukkan ke dalam variabel PHP $varPHP.

BERHASIL Photobucket

Kemudian, bagaimana jika sebaliknya, MENYIMPAN NILAI VARIABEL PHP KE VARIABEL JAVASCRIPT? Caranya pun juga tidak terlalu sulit karena disini kita juga menggunakan kekuatan magic dari form, namun tidak memerlukan form input. Photobucket

Intinya adalah menggunakan suatu parameter, misalnya sebagai berikut:

<html>
<head>
<title>passing php variable to javascript</title>

<script type="text/javascript">
function cek(A)
{
alert (A);
}

</script>

</head>

<body>

<?php $s="ini adalah nilai variabel php"; ?>

<form name="form1" id="form1" method="post" onsubmit="cek('<?php echo $s ?>')">
<input type="submit" id="sub" name="sub" value="tes variabel php">
</form>

</body>
</html>

Disana, nilai dari variabel PHP akan disimpan sebagai variabel A (variabel javascript).

Atau bisa juga memakai form input dengan mengeset valuenya dengan nilai variabel PHP, kemudian fungsi cek (fungsi javacript) mengambil nilai dari form input tersebut dengan sintaks document.getElementByID('sub').value. Kalau disini kita tidak menggunakan parameter.

Namun, cara ini memiliki kelemahan, yaitu jika kita memakai tabel yang datanya diperoleh dari database, maka otomatis ID dari form input juga akan sama untuk tiap data (row) yang muncul. Sehingga nilai yang diambil pun pasti akan row tabel yang paling atas.

Kalau hanya ingin menampilkan variabel PHPnya saja di dalam javascript tanpa menyimpannya ke dalam variabel javascript, bisa langsung menggunakan sintaks berikut di dalam body HTML:

<?php $s="ini adalah nilai variabel php"; ?>

<?php echo "<script>alert('$s')</script>" ?>
<?php echo "<script>document.write('tes $s')</script>" ?>

Tetapi tidak bisa dibalik seperti ini:

<script>alert("<?php $s ?>")</script>
<script>document.write("tes <?php $s ?>")</script>

Hal ini karena PHP sebagai server-side scripting tidak bisa dimasukkan ke javascript (TIDAK BERLAKU --> PHP on JAVASCRIPT)

Photobucket


-- Passing JavaScript variables to PHP -- Assigning JavaScript variables to PHP --
-- Passing PHP variables to JavaScript -- Assigning PHP variables to JavaScript --

72 komentar:

  1. kemen oy.. ada lagi gak pasing java scrip ke php dan sebaliknya nih,,

    BalasHapus
    Balasan
    1. maunya gimana bro?

      cara lain coba baca di link lain yang disebutin diatas, dengan mengirimnya sebagai method post, atau dengan memanfaatan DOM (data object model) atau juga dengan cookies

      cara yang ane terangin itu menurut ane yang paling enah sih

      Hapus
  2. aku mau buat dia pake prompt javascript kan..
    kan pake name=prompt("masukkan apa gitu")
    nah pas di phpnya gimana tuh?
    misalnya aku mau masukkin ke $nama di php bawahnya ...
    biar ga pake form biar ga ngerusak tampilan gitu..

    BalasHapus
    Balasan
    1. emang mau diapain setelah disimpan ke variabel php? mau langsung diolah dan ditampilin?

      Hapus
  3. trima kasih om artikelnya...

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. gan klo kita paki anchor/a dengan sub href, cara ambil variabel dari javascriptnya gimana?

    BalasHapus
    Balasan
    1. misalnya anchor seperti pada image gitu ya?

      Hapus
  6. siippp... ini dia yang ta cari2.. thx ya.. :)

    BalasHapus
  7. Thanks Mas ilmu'a.... Ini yg dicari2.... sukses terus mas...

    BalasHapus
  8. fdsfdsfasdfasdfadsfafasdf

    BalasHapus
  9. siiiiiiiip kereeen gan

    BalasHapus
  10. gan lok g make tombol gmn??

    BalasHapus
    Balasan
    1. bisa aja, asal bisa post back

      Hapus
    2. iya gan misalnya post datanya pake link/anchor bukan pake tombol submit gmana gan..? Hehehe... Btw nica share gan.. :D

      Hapus
    3. maksutmu biar bisa navigate url? bisa saja kok :)

      Hapus
  11. waduh ternyata banyak yang ga tau ya pasing javascript variable ke php ga pake reload. tapi ane tau nih. kalo ente - ente mau tau ane jual 100 usd dollar aja deh. mau ga ? mumpung banyak yang belum tau nih ?

    BalasHapus
    Balasan
    1. kagak perlu, aku juga udah tahu lewat web service, agak ribet memang, tapi oke

      Hapus
    2. oke deh sekarang gimana caranya passing variable php ke javascript supaya ga keliatan waktu di viewsource. ga pake ajaxajaxan segale ga pake cookie.gimana ya ?

      Hapus
    3. waktu di viewsource di browser? loh bukannya kalau source php itu gak kelihatan di client? :O

      Hapus
  12. wah ok juga...http://rumahdietnutrisi.com

    BalasHapus
  13. klo mau mengisi variable di dalam link ketika di klik linkt tersebut oleh user sistem menanyakan tentang dipilih atau tidak nya di bagian select option dengan value gmn caranya tu,, bisa dibantu gk?.,,

    BalasHapus
    Balasan
    1. maksutnya gimana gan? agak gak paham nih x_X

      Hapus
  14. klo misal value nya ambil id d database gmn caranya ya ?? tolong pencerahanya :)

    BalasHapus
    Balasan
    1. maksutnya dari database dimasukkan ke variabel javascript?

      Hapus
  15. iya mas . . . ,gmn ya caranya .. . .????

    BalasHapus
    Balasan
    1. dimasukkan ke dalam php dahulu,kemudian baru ke javascript...
      atau kalau mau langsung ya memakai web service

      Hapus
  16. Keyeen.. ga pernah kepikiran sama saya sbelumnya

    BalasHapus
  17. yah klo pake cara ini data yg diinput ke refresh donk ..
    pke ajax brarti.. :ngacir

    BalasHapus
    Balasan
    1. pakai ajax bisa, pakai web service juga bisa :)

      Hapus
  18. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  19. klo phpnya di halaman yg terpisah gimana tuh??

    BalasHapus
  20. Mohon pencerahan. bagaimana caranya memasukkan nilai dari form java script ke variabel php . Mis : $nama = disini form java scriptnya apa ya. yang seperti alert gitu tapi ada inputanya. selanjutnya $nama akan saya proses di php.

    BalasHapus
    Balasan
    1. sudah saya jelaskan di artikel mas :-)

      Hapus
  21. Mohon bantuannya, bagaimana kalo kasusnya seperti ini..
    script
    var v =document.forms["form1"]["kode_barang"].value;
    function test(){
    php
    $querypegawai = mysql_query("SELECT COUNT(*)+1 as hitung FROM TB_TRANSAKSI where kode_barang = " v;"");
    $i=-1;
    while ($datapegawai = mysql_fetch_array($querypegawai))
    {
    $i++;
    php
    script
    kurang lebihnya begitu..
    Jika tanpa where saya bisa mendapatkan nilainya,
    namun saya tidak paham jika harus menggunakan where. bagaimana penulisannya jika menuliskan variabel javascript dalam tag php.

    document.forms["form1"]["kode_barang"].value; input berikut saya buat hidden dan nilainya sudah ada.
    saya membutuhkan hasil hitung untuk membuat kode barang.
    dan saya menggunakan event on click untuk memanggil fungsi itu bukan fungsi post.

    BalasHapus
    Balasan
    1. bukannya fungsi php itu tidak bisa dikondiskan di fungsi javascript? cmmiw..

      Hapus
    2. betul bang oky wijaya, saya juga punya coding seperti itu.!
      trus kalo menurut suhu Arif Febriyanto solusinya bagaimana?

      mohon codingnya di tulis untuk pemecahan permasalahan dari bang oky wijaya..

      terima kasih

      Hapus
    3. masalah disana bukan ada tidaknya klausa where, tetapi karena variabel javascript tersebut tidak bisa langsung dipakai ketika fungsi query php dijalankan

      untuk kasus tersebut saya belum pernah mencoba untuk onclientclick, karena jika menggunakan php saya selalu membuatnya menjadi postback untuk mendapatkan nilainya.

      untuk kasus tersebut jika menggunakan .net bisa dilakukan dengan menggunakan ajax, kalau di-php saya belum pernah mencobanya.. mungkin secara logika sama.

      demikian penjelasan yang bisa saya berikan, mohon maaf jika ada kekurangnnya :D

      Hapus
    4. terima kasih atas tanggapan para master :D

      Hapus
  22. keren gan...
    emoticonnya
    asik :D

    BalasHapus
  23. kalo form input sekalian ditampilin hasilnya gimana gan ?

    ora iso'' aku mumet :/ (tidak bisa'' pusing)

    BalasHapus
    Balasan
    1. maksutnya gimana ya?

      sebenarnya ada cara lain yang lebih oke menggunakan ajax :D

      Hapus
  24. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  25. Mau tanya mas ,cara memasukan nilai dari variabel javascript otomatis ke textfield form, mohon pencerahannya

    BalasHapus
    Balasan
    1. kalau hanya memasukkan bisa langsung di aksi javascriptnya dengan langsung melakukan pengesetan terhadap value, namun jika ingin menyimpannya ke dalam variabel php dapat dilakukan dengan menyimppannya di hidden field

      Hapus
  26. saya masih baru nih dgn php, saya mau tanya mas, jadi misalnya saya mau buat form. ada 3 halaman form pengisiannya dengan menggunakan checkbox, dan halaman ke4 nya adalah halaman hasilnya. bagaimana caranya saya bisa dapat semua jumlah checkbox yang telah dipilih dihalaman2 tersebut? mohon pencerahannya

    BalasHapus
    Balasan
    1. kalau beda halaman susah, beda lagi kalau dalam 1 halaman tapi pakai panel

      Hapus
  27. kalo misalnya ane mau nyimpan variabel lokasi (latitude & longitude) ke php trus disimpan ke database gimana ya..? bantu donk.. thanks before ya,.

    BalasHapus
    Balasan
    1. variabel lokasi didapat darimana mas?

      Hapus
  28. saya masih belia untuk PHP mas, dan saya mau tnya mas master, apa mas sudah pernah menggunakan opener.document.form di java script?...

    BalasHapus
    Balasan
    1. iya pernah.. biasanya saya gunakan untuk membuka popup yang isinya ntar dikirim ke parent-nya

      Hapus
    2. mau tanya mas, saya punya dua halaman yang pertama dalam bentuk form terus yang kedua dalam bentuk table yang akan di select berdasarkan id untuk di masukkan ke form halaman pertama,
      yang saya bingungkan, saya mau ambil data dari halaman ke dua terus saya explode dan terakhir hasil array nya akan terbentuk mnjdi select options di halaman pertama,
      berikut coding nya...
      halaman pertama

      Lantai :



      halaman ke dua

      function post_value(lantai){

      /*alert(lantai) test apakah data sudah masuk ke javascript*/
      var lantai_N = lantai
      var myarr = lantai_N.split(",");
      var master = document.getElementById("lantai");
      for (var i=0; i <= myarr.length; i++) {
      var str = myarr[i];
      var res = str.substring(0, 7); /*ini untuk isi select option berdasarkan lantai*/
      master.options[master.options.length]= new Option(res, index);
      }

      opener.document.form1.lantai.value = lantai;
      self.close();
      }




      no

      ruangan

      action













      yang mau saya tanyakan bagaimana ya mas supaya kita select di halaman 2 tetapi menghasilkan select option di form halaman 1?..
      terima kasih ya mas sebelumnya atas bantuannya :)

      Hapus
    3. maaf mas, coding html saya tidak terbaca di blog ini, intinya di halaman 2 ada pariabel yang isinya lantai 1 ruang mkan, lantai 2 ruang mandi, dari variabel ini dijadikan array, dan nampil dihalaman pertama sebagai slect optiyon, terima kasih ni mas sebelumnya

      Hapus
    4. ini mas scrip nya
      function post_value(lantai){

      var lantai_N = lantai
      var myarr = lantai_N.split(",");
      for (var i=0; i <= myarr.length; i++) {
      var str = myarr[i];
      var wew = document.createElement("OPTION");
      wew.setAttribute("value", str);
      var t = document.createTextNode(str);
      wew.appendChild(t);
      //opener.document.form1.lantai.appendChild(x);

      }
      opener.document.form1.lantai.value = appendChild(wew);
      self.close();

      Hapus
    5. itu bukannya variabel wew akan terinisiasi terus difungsi for, harusnya inisiasinya ditaruh di luar for

      Hapus
    6. mkasih mas master ...

      Hapus
  29. Selamat siang mas arif, saya mau tanya gimana caranya grid di buat variable ?

    var getgrouplist = function(){
    group_id = $('#cbgroup').val();
    g.post({
    url: '/calendar/calendar/get_group_list',
    dataType: 'json',
    data:{
    group_id: $('#cbgroup').val()
    },
    callback: function(result){
    gridGroup.loadData('json',result);
    }
    });
    }

    //programmer : saeful bahri // fungsi untuk menampilkan grid list group
    var gridGroup = $('#gridGroup')
    .grid5({
    height: 150,
    dataType: 'json',
    fontSize: 8,
    column: {
    "Group Participant": {
    content: 'USERNAME',
    width: 40
    }
    }

    });


    Gridgroupnya mau dibuat variable untuk di insert ke database, bisa dishare carnya ? terima kasih

    BalasHapus
    Balasan
    1. maksudnya isi dari gridnya yang akan disimpan ke database?

      Hapus
  30. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  31. ada contoh javascript penjumlahan 2 bilangan g gan? 2 bilangan tsb d dapat dari inputan keyboard / tag < input >

    BalasHapus
  32. selamat pagi, saya mau tanya

    kalau membuat textfield pada inputan box(prompt) lebih dari satu,, bagaimana?

    mohon infonya"

    BalasHapus
  33. Luar biasa ..
    Duaharian nyari konsep yang seperti ini, akhirnya nemu juga di website lokal ..

    Begitu lihat kodingnya langsung terinspirasi ..
    Trims Gan udah share trik jitunya ..

    BalasHapus
  34. Mas Mau nayak , kalo misalnya variabeljavascript tersebut berada di dalam fungsi giman ya cara mengambilnya dan memasukan ke dalam variabel php

    BalasHapus
  35. Thank you gan. Saya jadi lebih ngerti.... Tapi ada gak gan, Postingan agan cara membuat website?(Misalnya: www.Arif-Febriyanto.com)

    BalasHapus
  36. mas kalau saya mau load data dari database dari javascrip kemudian datanya di konversi ke json gimana ya? mohon bantuannya.. :)

    BalasHapus
  37. Terimakasih banyak bro atas share ilmu nya

    BalasHapus
  38. bro, mau tanya..
    gimana caranya jika val id pada javascipt di masukkan kedalam query database..

    saya mau buat pemanggilan data dari database menggunakan javascript..

    BalasHapus
  39. om, dalam kasus yang pertama

    document.form1.media.value = varJS;

    jika inputan media kita ingin taruh di dalam perulangan seperti apa ya?

    karena jika saya buat seperti ini tidak bisa terpanggil di inputan php nya

    var i;

    for (i=1; i<=4; i++){
    document.form1.txt_persen_listing_ma_+i).value = 50;
    }

    mohon bantuannya mas

    BalasHapus

Ayo kirim komentar, disini!!