Auto Fill Form : Solusi Menampilkan Data Dari Dropdown

11 Nov 2012

Terinspirasi dari pertanyaan di forum Yii Framework, "Menampilkan Data Kedalam Textfield Berdasarkan Nilai Dari Dropdownlist". Auto Fill yaitu teknik menampilkan data dalam form berupa textfield, dropdown, dan lain sebagainya. Ya teknik auto fill form memang terkadang perlu dilakukan untuk membuat ataupun menyunting data dari database. Alih-alih mengetik sendiri lebih baik dilakukan secara otomatis. Lebih efektif dan efisien. Untuk membuat auto fill dari dropdownlist cukup sederhana. Penasaran? Lihat postingan berikut!

Buat dahulu controller. Nama terserah anda. Tapi untuk keseragaman kita beri nama AutoCompleteController.php
public function actionCreate()
 {
  
  if(Yii::app()->request->isAjaxRequest && $_POST['Blog']){
   $id = $_POST['Blog']['title'];
   $model = Blog::model()->findByPk($id);
   echo CJSON::encode($model);
  }
  else {
   $model = new Blog;
   $this->render('create',array(
    'model'=>$model,
   ));
  }
 }
Buat view create.php. Nanti di view kita akan membuat form auto fill secara otomatis.
<div class="form">
<?php
$form=$this->beginWidget('CActiveForm', array(
    'id'=>'test-form',
    'enableAjaxValidation'=>false,
));?>
 <div class="row">
  <?php echo $form->labelEx($model,'title'); ?>
        <?php echo $form->dropDownList(
    $model,'title',
    CHtml::listData($model->findAll(), 'id', 'title'),
    array('empty'=>'-pilih-',
      'ajax'=>array(
       'type'=>'POST',
       'beforeSend'=>'function(data){if($(this+ ":selected").val()==""){alert("Silakan Pilih");return false;}}',
       'dataType'=>'json',
       'success'=>'function(data){$("#Blog_url").val(data.url);$("#Blog_id").val(data.id);}',
      ),
    )
   ); ?>
        <?php echo $form->error($model,'title'); ?>
    </div>
 <div class="row">
  <?php echo $form->labelEx($model,'id'); ?>
  <?php echo $form->textField($model,'id');?>
        <?php echo $form->error($model,'id'); ?>
    </div>
 <div class="row">
  <?php echo $form->labelEx($model,'url'); ?>
  <?php echo $form->textField($model,'url');?>
        <?php echo $form->error($model,'url'); ?>
    </div>
<?php $this->endWidget(); ?>
</div>

Dalam listing diatas kita akan mengirim parameter title melalui jalur Ajax dengan metode POST pada saat state dropdown diubah / onchange. Controller akan mengecek apakah ini ajax request atau tidak. Jika benar maka data format JSON akan ditampilkan. Data yang didapat dari JSON kemudian diolah menjadi informasi yang akan ditampilkan pada form tersebut secara on the fly.
Berikut adalah hasil render via browser

Autofill with Jquery Yii

Menarik bukan! Itulah Yii memudahkan segala pekerjaan kita, Cheers:

NB:
Untuk model kita gunakan class Blog (Jika kamu baru mengikuti dan belum mengetahui detail class Blog, gunakan link ini untuk mengetahuinya)

5 comments:

  1. gan mau tanya donx saya punya form kya gini

    labelEx($model2,'Ukuran'); ?>
    DropdownList($model2,'Ukuran',array(
    '2m x 2m'=>'2m x 2m',
    '2m x 3m'=>'2m x 3m',
    '3m x 2m'=>'3m x 2m',
    'Lainnya'=>'Lainnya'));
    ?>



    labelEx($model2,'Harga'); ?>
    textField($model2,'Harga',array('style'=>'width:75px;','size'=>25,'maxlength'=>25)); ?>


    nah klo ketika saya memilih dropdown brdasarkan ukurannya, maka harga pun akan ikut brubah sesuai dengan ukuran yg dipilih

    ReplyDelete
  2. gan itu kalo tittle nya auto juga bisa nggak? jadi misal saat kita akses halaman tersebut misal "http://localhost..../artikel/aku bagaikan bintang" title nya langsung keisi aku bagaikan bintang.....gimana gan?

    ReplyDelete
  3. maaf gan, saya udah nyoba nih tutornya, tapi saya masih belum work pas tampil datanya, apa ada script yg harus diubah dulu yah??

    ReplyDelete
  4. setelah title dipilih, Id sama Url nya kok gak terisi?
    apakah script di atas salah ya..

    ReplyDelete