Cara Memasukkan Data Kedalam Tabel Tanpa Database Dilengkapi Validasi Menggunakan Javascript (Sederhana)
Pada artikel ini merupakan kelanjutan dari artikel “Membuat Validasi Input Menggunakan Javascript” dan “Cara Memasukan Data Kedalam Tabel Sementara Menggunakan Javascript”. Keduanya artikel tersebut akan dicoba untuk digabungkan menjadi satu. Jadi, ketika data kosong akan di input maka data tersebut tidak akan langsung masuk kedalam tabel, namun akan ada tampilan validasi yang akan memberitahu bahwa data tersebut masih salah atau masih kosong. Okey langsung saja.
Membuat Tampilan HTML Simpan Dengan Nama Tutor.html
<html>
<head>
<title>Dettline</title>
<script src='javascript.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select><p>* Pilih Agama</p>
</pre>
<input type='button' onClick='terimainput()' value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
<table border='1' id='tabelinput'>
<tr>
<td>NIM</td>
<td>NAMA</td>
<td>AGAMA</td>
</tr>
</table>
</body>
</html>
<head>
<title>Dettline</title>
<script src='javascript.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select><p>* Pilih Agama</p>
</pre>
<input type='button' onClick='terimainput()' value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
<table border='1' id='tabelinput'>
<tr>
<td>NIM</td>
<td>NAMA</td>
<td>AGAMA</td>
</tr>
</table>
</body>
</html>
Penjelasan
mengenai codingan diatas sudah dibahas lengkap pada artikel-artikel sebelumnya.
Artikel1 dan artikel2. Namun dettline akan coba mengulasnya sedikit. Pada HTML
diatas bagian yang terpenting adalah name
dan id serta onClick. Bagian tersebut adalah bagian yang terhubung dengan
javascript. Dalam tutorial ini, Javascript itu sendiri dibuat dengan file yang
berbeda (tidak ditulis langsung di dalam file tutor.html). Berikut adalah langkah untuk membuat file javascript.
Menggabungkan Javascript Validasi
dan Mandatory Javascript.
Membuat File Javascript Simpan
Dengan Javascript.js
Simpanlah file berikut dalam 1 lokasi penyimpanan yang sama dengan file tutor.html diatas.
Membuat File Javascript Simpan
Dengan Javascript.js
Simpanlah file berikut dalam 1 lokasi penyimpanan yang sama dengan file tutor.html diatas.
function terimainput(){
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
if(x==null || x=="")
{
document.getElementById("val_nim").innerHTML="<font color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
}
} else {
document.getElementById("val_nim").innerHTML="<font color='purple'>* Benar</font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
var tabel = document.getElementById("tabelinput");
var row = tabel.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = x;
cell2.innerHTML = y;
cell3.innerHTML = z;
}
}
}
Bila sampai tahap ini telah sobat
buat, maka sobat dapat mengujinya sekarang. Secara garis besar tampilannya akan
seperti ini
Dan ada sedikit tambahan dari Dettline, semoga bermanfaat.
Dettline menambahkan lampiran kedua file diatas. Sobat dapat mengunduhnya melalui GoogleDrive > Download
Terimakasih atas kunjungan sobat. Semoga artikel ini dapat membantu.
Dan ada sedikit tambahan dari Dettline, semoga bermanfaat.
Dettline menambahkan lampiran kedua file diatas. Sobat dapat mengunduhnya melalui GoogleDrive > Download
Terimakasih atas kunjungan sobat. Semoga artikel ini dapat membantu.
1 komentar: