Pada kesempatan kali ini saya akan menjelaskan cara membuat validasi combobox dinamyc dari input textbox kosong dengan javascript. Seperti yang sudah teman-teman ketahui sebelumnya, pada pembahasan saya yang sebelumnya yang berjudul cara membuat combobox dinamyc dari input textbox dengan javascript masih ada kaitannya dengan pembahasan saya kali ini.
Dan pada pembahasan kalini hasil pengembangan dari pembahasan yang sebelumnya, dimana pada pembahasan yang sebelumnya belum adanya validasi input nilai kosong atau tidak diisi pada input textbox tersebut yang menyebabkan apabila diisi dengan nilai kosong maka akan ikut bertambah option dari combobox tersebut dengan option kosong, dan pada pembahasan ini saya akan membuat validasi untuk mecegah input data kosong tersebut.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file index.html
- Ketikan kode seperti berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <title>Cara Membuat Validasi Combobox Dinamyc Dari Input Textbox Kosong Dengan JavaScript</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <script> </script> <body> <div class="container col-md-6"> <h4 class="text-center mt-5 mb-5">Combobox Dinamyc</h4> <div class="form-group row"> <label class="col-sm-4 col-form-label">Tambah Option</label> <div class="col-sm-8"> <input type="text" name="inputOptions" id="inputOptions"/> <input type="button" value="Add" onclick="addCombo()"> </div> </div> <div class="form-group row"> <div class="col-sm-12"> <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="combobox" name="combobox"></select> </div> </div> </div>> </body> <script> function addCombo() { var textb = document.getElementById("inputOptions"); var combobox = document.getElementById("combobox"); var option = document.createElement("option"); option.text = textb.value; option.value = textb.value; if(option.value){ try { combobox.add(option, null); //Standard }catch(error) { combobox.add(option); // IE only } textb.value = ""; textb.focus(); }else{ alert("Kotak tambah options masih kosong !"); textb.focus(); } } </script> </html> |
- Sampai disini jika sudah teman-teman save terlebih dahulu file index.html tersebut
- Lihat hasilnya di browser kesayangan kalian
- Maka jika input textbox tersebut kosong dan kemudian ditekan tombol tambah maka akan menampilkan pesan alert() Kotak tambah options masih kosong ! dan sebaliknya, apabila terisi akan menambahkan kedalam option combobox tersebut.
Sampai disini penjelasan saya mengenai cara membuat validasi combobox dinamyc dari input textbox kosong dengan javascript, semoga bermanfaat.