Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TERJAWAB [solved] ask: autoload dropdown
#1
selamat siang semua.
saya ada script seperti ini:

PHP Code:
   <html><head>
 
   <script type="text/javascript">
 
   function ShowDiv(selectbox){
 
     var opts=selectbox.options;
 
     for(i=1i<opts.lengthi++){
 
       document.getElementById(opts[i].value).style.display=opts[i].selected "inline" "none";
 
     }
 
   }
 
   </script>
    </head>

    <body>
    <?php
    echo 
"<form name=employeedata action=?command=viewpostdata method=post>";
 
     //write dropdown for department
 
     echo "&nbsp;&nbsp;&nbsp;Department: <select name=department id=department onchange='ShowDiv(this);'>";
 
     $departmentlist=mysql_query("SELECT * FROM department");
 
     echo "<option value=\"\">Select Department</option>";
 
     while($data=mysql_fetch_array($departmentlist)){
 
       echo "<option value=\"$data[dept_code]\">$data[dept_name]</option>";
 
     }
 
     echo "</select>";
 
     //prepare dropdown for position in all department
 
     $departmentlist=mysql_query("SELECT * FROM department");
 
     while($data=mysql_fetch_array($departmentlist)){
 
       $positionlist=mysql_query("SELECT * FROM table_position WHERE dept_code='$data[dept_code]'");
 
       $totpos=mysql_num_rows($positionlist);
 
       if($totpos<1) echo "<div id=\"$data[dept_code]\" style=\"display:none;\"></div>";
 
       else{
 
         echo "<div id='$data[dept_code]' style='display:none;'>";
 
         echo "&nbsp;&nbsp;&nbsp;Position:&nbsp;";
 
         echo "<select name=position>";
 
         while($position=mysql_fetch_array($positionlist)){
 
           echo "<option value=$position[pos_code]>$position[pos_name]</option>";
 
         }
 
         echo "</select>";
 
         echo "</div>";
 
       }
 
     }
 
     echo "<input type=submit value=send>";
 
     echo "</form>";
 
   ?>
    </body></html> 

maksud script ini membuat dropdown menu untuk 'departemen', setelah departemen dipilih maka akan muncul dropdown baru di sebelah kanannya untuk posisi-posisi yang ada di departemen terpilih, dan setelah tombol 'send' di click maka nilai kode departemen dan kode posisi akan dikirim ke halaman lain.

script berjalan sesuai yang diharapkan, nilai yang di post untuk kode departemen sudah benar, ada masalah pada nilai yang di post untuk kode posisi, nilai yang terkirim selalu nilai dari block '<div id=' yang terakhir.

kalo dilihat dari file html yang digenerate kelihatannya sudah benar, tapi apa penyebab permasalahan itu ya?

---
halo mas Jawaad, saya sudah gabung  Yihaa
Reply
#2
Halo Mas Adi r45,
met gabung di forum Mr Green

Mas, apakah code position mempounyai karakter spasi?
Kalau iya, coba diubah bagian baris ini:
PHP Code:
echo "<option value=$position[pos_code]>$position[pos_name]</option>"
Menjadi:
PHP Code:
echo "<option value=\"".$position[pos_code]."\">".$position[pos_name]."</option>"
Reply
#3
makasih atas sambutan dan replynya mas Jawaad,
sudah saya coba dengan berbagai cara mulai

PHP Code:
echo "<option value=\"".$position[pos_code]."\">".$position[pos_name]."</option>";
    
juga
    
echo "<option value='$position[pos_code]'>".$position[pos_name]."</option>"
tapi hasilnya masih salah, sedangkan kode posisi sendiri merupakan tinyint(3) auto_increment di didatabasenya, dan generated html kelihatannya sudah benar seperti dibawah ini (maaf panjang):

PHP Code:
&nbsp;&nbsp;&nbsp;Department:
    <
select name=department id=department onchange='ShowDiv(this);'>
      <
option value="">Select Department</option>
      <
option value="A">Information Technology</option>
      <
option value="B">Administrative General</option>
      <
option value="C">Sales Marketing</option>
      <
option value="D">Front Office</option>
      <
option value="E">Accounting</option>
      <
option value="F">Food Beverages</option>
      <
option value="G">Human Resources Development</option>
      <
option value="H">Engineering</option>
      <
option value="I">Housekeeping</option>
      <
option value="J">Horison Club</option>
      <
option value="K">Security</option>
      <
option value="L">Public Relation</option>
    </
select>
    <
div id='A' style='display:none;'>
      &
nbsp;&nbsp;&nbsp;Position:&nbsp;
      <
select name=position>
        <
option value=1>IT Manager</option>
        <
option value=2>IT Staff</option>
      </
select>
    </
div>
    <
div id='B' style='display:none;'>
      &
nbsp;&nbsp;&nbsp;Position:&nbsp;
      <
select name=position>
        <
option value=3>General Manager</option>
        <
option value=4>GM Secretary</option>
      </
select>
    </
div>
    <
div id='C' style='display:none;'>
      &
nbsp;&nbsp;&nbsp;Position:&nbsp;
      <
select name=position>
        <
option value=5>Sales Marketing Manager</option>
        <
option value=6>Sales Manager</option>
        <
option value=7>Marketing Manager</option>
        <
option value=8>Sales Marketing Secretary</option>
        <
option value=9>Executive Sales</option>
      </
select>
    </
div>
    <
div id='D' style='display:none;'>
      &
nbsp;&nbsp;&nbsp;Position:&nbsp;
      <
select name=position>
        <
option value=10>Front Office Manager</option>
        <
option value=11>Night Manager</option>
        <
option value=12>Duty Manager</option>
        <
option value=13>Reservation Officer</option>
        <
option value=14>Bell Captain</option>
        <
option value=15>Bell Boy</option>
        <
option value=16>Receptionist</option>
      </
select>
    </
div>
    <
div id='E' style='display:none;'>
      &
nbsp;&nbsp;&nbsp;Position:&nbsp;
      <
select name=position>
        <
option value=17>Chief Accountant</option>
        <
option value=18>AsstChief Accountant</option>
        <
option value=19>Book Keeper</option>
        <
option value=20>General Cashier</option>
        <
option value=21>Account Payable</option>
        <
option value=22>Account Receivable</option>
      </
select>
    </
div>
    <
div id="F" style="display:none;"></div>
    <
div id="G" style="display:none;"></div>
    <
div id="H" style="display:none;"></div>
    <
div id="I" style="display:none;"></div>
    <
div id="J" style="display:none;"></div>
    <
div id="K" style="display:none;"></div>
    <
div id="L" style="display:none;"></div
nah anehnya, data yang ke 'post' selalu kode-kode posisi yang ada di block

PHP Code:
<div id='E' style='display:none;'
padahal saya pilih posisi yang ada di block departemen 'A' atau 'B' atau lainnya sedangkan kalo saya pilih posisi yang ada di departemen 'E' data yang ke post benar, agak membingungkan buat saya tapi mudah-mudahan tidak untuk mas Jawaad dan yang lainnya Mr Green
Reply
#4
Mas, saya ngerti skrng...
itu yg di post di waktu submit, isi HTML nya masih nampil di source nya ya, waluapun memang style nya display:none. Maka variabel dengan nama position akan nampil semuanya.

Berbeda dgn kasus yg menggunakan script AJAX yg saya contohkan pd artikel Unlimited Select chain AJAX.

Memang jika ingin mengatur variabel2 yg akan di post, seharusnya benar2 terhapus element2 yg kita tidak ingin kita post, seperti kasus mas skrng ini, kita tidak ingin element yg kita tidak pilih ikut post, yg terjadi nama element terakhir selalu ikut, walaupun memang tidak nampil.

Kalau AJAX Select Chain yg ada di artikel tsbt menghapus element, jadi waktu post, sesuai dgn yg kita inginkan.

Coba mas pakai script AJAX yg sederhana ini.
Contoh: http://www.nusansifor.com/kasus/unlimit_...select.php
Script: http://www.nusansifor.com/kasus/unlimit_...elect.phps
Reply
#5
sebetulnya script 'Unlimited Select chain AJAX' punya mas Jawaad yang memberi saya inspirasi pada script yang sedang saya kembangkan Wink , tapi script tersebut menggunakan metoda GET sedangkan yang saya inginkan menggunakan metoda POST supaya data tidak terlihat di address bar.

jadi intinya saya harus cari cara supaya data yang tidak diinginkan tidak ikut ter-post ya?

atau ada solusi lain yang lebih mudah saya mengerti?
satu lagi, script 'Unlimited Select chain AJAX' punya mas tidak sederhana buat saya Embrassed
Reply
#6
ternyata ilmunya yang kurang, bukan scriptnya Rolleyes maaf...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <
head>
    <
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <
title>Test Chain Unlimited Select</title>
    <
style>
    .
inline {
        
displayinline;
    }
    </
style>
    <
script type="text/javascript">
    
// AJAX konten Jin
    
var http_request false;
    function 
jin_ajax_req(url,target) {
      
http_request false;
      if (
window.XMLHttpRequest) { // Mozilla, Safari,...
        
http_request = new XMLHttpRequest();
        if (
http_request.overrideMimeType) {http_request.overrideMimeType('text/xml');}
      } else if (
window.ActiveXObject) { // IE
        
try {
          
http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (
e) {
          try {
            
http_request = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (
e) {}
        }
      }

      if (!
http_request) {
        
alert('Ende :(');
        return 
false;
      }
      
http_request.onreadystatechange alertInhalt;
      
http_request.open('GET'urltrue);
      
http_request.send(null);

      function 
alertInhalt() {
        if (
http_request.readyState == 4) {
          var 
answer http_request.responseText;
          if(
document.getElementById(target).innerHTML != answer){document.getElementById(target).innerHTML answer;}
          else{
document.getElementById(target).innerHTML "";}
        } else {
document.getElementById(target).innerHTML "Sedang Memuat...";}
      }
    }
    
// end
    
</script>
    </head>

    <body>
    <?php
    
if(isset($_GET['department'])) {
      
$deptcode=$_GET['department'];
      include_once(
'../intranet/include/dbconfig.php');
      
$connection=mysql_connect($alamatdb,$userdb,$passworddb);
      
mysql_select_db($database);
      
$deptlist=mysql_query("SELECT * FROM table_position WHERE dept_code='$deptcode'");
      
$positiontot=mysql_num_rows($deptlist);
      if(
$positiontot>0){
        echo 
"&nbsp;&nbsp;&nbsp;Position: ";
        echo 
"<select name='position'>";
        echo 
"<option value=''>Select Position</option>";
        while(
$data=mysql_fetch_array($deptlist)){
          echo 
"<option value=$data[pos_code]>$data[pos_name]</option>";
        }
        
mysql_close($connection);
        echo 
'</select>';
        exit();
      }else exit();
    }else echo 
"";

    echo 
"<form action=readdata.php action=post>";
    echo 
"Department: ";
    echo 
"<select name='department' onChange=\"jin_ajax_req('?department=' + this.value + '', 'position');\">";
    echo 
"<option>Select Department</option>";
    include_once(
'../intranet/include/dbconfig.php');
    
$connection=mysql_connect($alamatdb,$userdb,$passworddb);
    
mysql_select_db($database);
    
$deptlist=mysql_query("SELECT * FROM department");
    while(
$data=mysql_fetch_array($deptlist)){
      echo 
"<option value=$data[dept_code]>$data[dept_name]</option>";
    }
    
mysql_close($connection);
    echo 
"</select>";
    echo 
"<div id='position' class='inline'></div>";
    echo 
"<br><input type=submit value=send>";
    echo 
"</form>";
    
?>

    </body>
    </html> 
data yang terkirim untuk kode departemen maupun posisi sudah benar, masalahnya sekarang adalah data yang terkirim itu dengan metoda GET bagaimana merubahnya supaya menjadi POST, soalnya dalam form itu banyak sekali data yang dikirim ke halaman penerima...
Reply
#7
Unlimited Select Chain AJAX tidak terlihat di address bar, silahkan lihat saja pada contoh live nya mas..
http://www.nusansifor.com/kasus/unlimit_...select.php

mas Adi, itu akan dikirim lewat post, dicoba aja setelah klik SUBMIT (selama form method nya POST bukan GET ya, default nya sudah POST), var_dump saja variable2 nya.. kan bisa kelihatan.
PHP Code:
var_dump($_POST); 
dan saya lihat form anda sudah pakai post kok, so gak masalah, ini cuplikan script Anda mas:
PHP Code:
echo "<form action=readdata.php action=post>"

GET yg didapat dari AJAX, hanya ambil data dan mengembalikan ke halaman FORM saja, dan tidak untuk disubmit... kalau ingin AJAX yg POST, nanti saya kasih script JS yg sederhanya... ini dibawah ini:

PHP Code:
function jin_ajax_form(f,targetnya){

    
//bagian untuk mengenali browser
    
if (window.XMLHttpRequest){
        var 
xmlReq = new XMLHttpRequest();
    } else if (
window.ActiveXObject) {
        var 
xmlReq = new ActiveXObject('Microsoft.XMLHTTP'); 
    } else {
        
alert('Browser not supported for AJAX');
    }
    
//------------------------------

    //Memanggil parameter/value dari input box dari form
    
var formData ''elem '';
    for(var 
s=0s<f.elements.lengths++){
        
elem f.elements[s];
        if(
formData != ''){
            
formData += '&';
        }
        
formData += elem.name+"="+elem.value;
    }
    
//-------------------------

    //Mengeluarkan Proses dari server
    
xmlReq.onreadystatechange = function(){
        if(
xmlReq.readyState == 4){
            
document.getElementById(targetnya).innerHTML xmlReq.responseText;
        } else {
            
document.getElementById(targetnya).innerHTML "<center><br><br>Menunggu...<br><img src=\"" jin_path_thm "images/working.gif\"><br><br></center>";
        }
    }
    
//-------------------------------

    //Mengirim data ke server xmlReq.open("post", "ajax_output.php", true)
    
xmlReq.open(f.methodf.actiontrue);
    
xmlReq.setRequestHeader("Content-Type""application/x-www-form-urlencoded");
    
xmlReq.send(formData);
    return 
false;
    
//-----------------------
    


Tapi untuk kasus AJAX disini ya pastinya lebih cocok pakai AJAX yang GET, karena tidak ingin mempost (simpan/edit) kan sesuatu, kan hanya mengambil data untuk persiapan POST simpan,edit data.

Kecuali yg dibutuhkan Kirim Post dengan AJAX seperti Form AJAX Contact.
Reply
#8
mas Jawaad, saya sudah coba script 'Unlimited Select Chain AJAX', hasil post akurat dan view sesuai, tapi sudah saya coba beberapa kali diterapkan di script saya hasilnya adalah tampilan script saya jadi 'hancur' Smile

saya sudah coba hilangkan beberapa baris di css saya yang mungkin menjadi penyebab 'kehancuran' tampilan tersebut tapi tetap saja tidak membuahkan hasil.

sistem saya hanya script induk yang memanggil (include_once) script-script modular, berdasarkan pengamatan saya tidak ada yang aneh pada script induk maupun css-nya (mungkin salah).

mohon pencerahannya mas, saya attach file jpg hasil capture yang saya maksud dengan tampilan 'hancur'.

'kehancuran' terjadi setelah saya memilih salah satu departemen, yang terjadi adalah halaman awal dari sistem ditampilkan dibawah form walaupun sekilas saya lihat group select untuk pilihan 'posisi' tampil (dibawah form/tidak inline) sebelum akhirnya tertimpa oleh halaman awal tersebut.

terima kasih banyak atas bantuannya.


Attached Files
.jpg   02-after-select-department.JPG (Size: 46.43 KB / Downloads: 2,878)
.jpg   01-before-select-department.JPG (Size: 20.8 KB / Downloads: 2,878)
Reply
#9
oww, jangan panik dulu, itu halaman index nya terpanggil lagi ya?
script onchange nya manggil alamat yg sama dan tidak di stop ya? makanya jadi nampil, karena permintaan nya nampilin halaman web lagi.

waktu memanggil AJAX, jangan membawa seluruh halaman (jika memang itu yg diinginkan).. perhatikan script contoh, saya bikin hanya 1 file (dijadikan 1 file), dikarenakan hanya contoh (tapi saya stop/exit, karena saya hanya ingin nampilkan seperlunya saja, tanpa diulang keseluruhan halaman).

coba perhatikan lagi script contoh AJAX yg ada disini:
http://www.nusansifor.com/kasus/unlimit_...elect.phps
(lihat ada exit)
PHP Code:
if(isset($_GET['propinsi'])) {
        echo 
"<select name='kabupaten' onChange=\"jin_ajax_req('?kabupaten=' + this.value + '', 'div_kecamatan');\">";
        echo 
'<option>Pilih Kabupaten</option>';
        echo 
'<option>Cirebon</option>';
        echo 
'<option>Tegal</option>';
        echo 
'<option>Pekalongan</option>';
        echo 
'</select>';
        echo 
'<div id="div_kecamatan" class="inline"></div>';
        exit(); 
// <-- SAMPAI SINI HARUS DI STOP, JADI AJAX HANYA NAMPIL ECHO PILIHAN SAJA
    
}

    
// DISINI SCRIPT LAINN NYA YG MEMANGGIL HEADER, 
    // MEMANGGIL BODY
    // MEMANGGIL FOOTER
    // DAN MEMANGGIL VIEW/ECHO LAIN LAIN NYA 

Jadi tidak memanggil seluruh halaman website lagi didalamnya.
Yg mas bikin itu kan AJAX nya nampilkan halaman keseluruhan, bukan hanya nampilkan kalimat yg kita inginkan. Atau sebaiknya dipisahkan saja file nya kalau susunan framework Anda sudah include seluruh template halaman.

Contoh AJAX ke alamat URL yg dipisah:
PHP Code:
<select name="propinsi" onChange="jin_ajax_req('ajax_ambil_data_wilayah.php?propinsi=' + this.value + '', 'div_kabupaten');"
Perhatikan diatas, AJAX nya memanggil URL "ajax_ambil_data_wilayah.php".
Isi dari ajax_ambil_data_wilayah.php tentunya jangan memanggil seluruh halaman web lagi, cukup echo saja.
Kalau mau coba2, test aja isinya text yg terpilih.
Contoh isi file ajax_ambil_data_wilayah.php:
PHP Code:
<?php
    
// TIDAK ADA INCLUDE HEADER ATAU HALAMAN WEB LAIN
    
echo 'Data yg di klik adalah: ' $_REQUEST['propinsi'];
    
// TIDAK ADA INCLUDE FOOTER ATAU HALAMAN WEB LAIN
    
?>
Reply
#10
Sad Surprised Icon_lol Idea Yihaa
ternyata itu masalahnya, maaf saya gak ngeh...
tampilan ok, post data akurat...

PHP Code:
<select name="propinsi" onChange="jin_ajax_req('ajax_ambil_data_wilayah.php?propinsi=' + this.value + '', 'div_kabupaten');"
coba saya lebih pinter pasti gak panjang lebar Icon_evil

musik Cool <- mas Jawaad emang kul...

problem solved mas, matur nuwun saget nggeh...
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)