Tutorial Javascript – Memanipulasi Attribute Textfield Dengan jQuery

Dipublikasikan oleh El Cicko pada

memanipulasi attribute textfield dengan jquery

Pada artikel kali ini kita akan membahas tutorial Javascript tentang bagaimana cara memanipulasi attirubute textfield dengan JQuery. Contohnya seperti merubah atribut element textfield dari enable menjadi disable ataupun sebaliknya.

Seebelumnya saya akan sedikit menjelaskan attribute didalam HTML. Attribute itu sendiri adalah sifat atau karakteristik dari suatu elemen HTML. Pada textfield, attribute-nya sendiri terdiri dari required, readonly dan lain sebagainya.

Setidaknya menurut dari W3Schools, ada beberapa attribute pada elemen <input> yang dapat kita gunakan.

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Selain itu ada attirbute readonly atau disabled yang dapat kita gunakan pada tag <input>.

Tujuan dari pembahasan kita kali ini adalah untuk dapat mengubah sebuah nilai dari attribute pada tag <input> secara real time tanpa harus memuat ulang halaman. Pada contoh kasus kali ini sebuah attribute pada <input> akan berubah sesuai dengan nilai tertentu dari tag <input> yang lain.

Dengan JQuery, kita dapat melakukan hal tersebut dengan mudah. Kita akan menggunakan method attr() dan juga removeAttr() dari JQuery.

Fungsi dari method attr() adalah untuk memasang atau mengaktifkan sebuah attribute pada form. Sebaliknya removeAttr() digunakan untuk menghapus sebuah attribute pada suatu form.

Baca Juga : Tutorial Javascript – Refresh Konten Otomatis Dengan jQuery

OK, sekarang contoh kasusnya adalah saya bakal memanipulasi attribute form dengan menggunakan attribute readonly. Sekarang kita ketikkan code berikut pada texteditor.

<html>
  <head>
    <title></title>
    <style>
    input[readonly="readonly"] {
        background-color: #AAAAAA;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
      $(document).ready(function(){
          $("#tipe_bayar").change(function() {
              var tipe_bayar = $("#tipe_bayar").val();
              if (tipe_bayar == "cicil") {
                  // menghapus attribute readonlye dari textfield
                  $('#cicil').removeAttr('readonly');
                  // menyelipkan attribute readonlye ke dalam textfield
                  $('#cash').attr('readonly','true');
                  // memasukan sebuah nilai / value kedalam textfield
                  $('#cicil').val('0');
                  $('#cash').val('0');
          
              } else if (tipe_bayar == "cash") {
                  // menghapus attribute readonlye dari textfield
                  $('#cash').removeAttr('readonly');
                  // menyelipkan attribute readonlye ke dalam textfield
                  $('#cicil').attr('readonly','true');
                  // memasukan sebuah nilai / value kedalam textfield
                  $('#cicil').val('0');
                  $('#cash').val('0');  
              } 
          });
      });
    </script>
  </head>
  <body>
    <h3>Ubah Attribute Dengan Jquery</h3>
    <form>
      <select id="tipe_bayar">
        <option value="">-- PILIH METODE BAYAR</option>
        <option value="cicil">ANGSURAN</option>
        <option value="cash">CASH</option>
      </select>
      <br>
      <input id="cicil" class="input-xlarge" type="text" placeholder="masukkan nominal disini...">
      <br>
      <input id="cash" class="input-xlarge" type="text" placeholder="masukkan nominal disini...">
      <br>
      <button value="simpan">SIMPAN</button>
    </form>
  </body>
</html>

simpan dengan ekstensi HTML dan jalankan pada browser. 

Sekian dulu tutorial javascript dari saya tentang bagiamana cara memanipulasi attribute textfield dengan JQuery. Selamat mencoba dan semoga bermanfaat

download-button

El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *