Array.some dan Array.every, Cek Isian Dari Setiap Text Box


Anggaplah kita mempunya isian dari text box berbentuk sebuah table. Aturan dari isian ini, jika pada baris tertentu ada salah satu text box yang diisi, maka semua text box dalam baris yang sama juga harus ada isinya.

Lihat keterangan lengkap untuk Array.some dan Array.every di situs Mozilla Developer Center.

<!-- html table dan text box -->
<table>
	<thead>
		<tr style="font-weight: bold; text-align: center;">
			<td>Satu</td>
			<td>Dua</td>
			<td>Tiga</td>
			<td>Empat</td>
			<td>Lima</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="Text" name="txtSatu_1" id="txtSatu_1"></td>
			<td><input type="Text" name="txtDua_1" id="txtDua_1"></td>
			<td><input type="Text" name="txtTiga_1" id="txtTiga_1"></td>
			<td><input type="Text" name="txtEmpat_1" id="txtEmpat_1"></td>
			<td><input type="Text" name="txtLima_1" id="txtLima_1"></td>
		</tr>
		<tr>
			<td><input type="Text" name="txtSatu_2" id="txtSatu_2"></td>
			<td><input type="Text" name="txtDua_2" id="txtDua_2"></td>
			<td><input type="Text" name="txtTiga_2" id="txtTiga_2"></td>
			<td><input type="Text" name="txtEmpat_2" id="txtEmpat_2"></td>
			<td><input type="Text" name="txtLima_2" id="txtLima_2"></td>
		</tr>
		<tr>
			<td><input type="Text" name="txtSatu_3" id="txtSatu_3"></td>
			<td><input type="Text" name="txtDua_3" id="txtDua_3"></td>
			<td><input type="Text" name="txtTiga_3" id="txtTiga_3"></td>
			<td><input type="Text" name="txtEmpat_3" id="txtEmpat_3"></td>
			<td><input type="Text" name="txtLima_3" id="txtLima_3"></td>
		</tr>
		<tr>
			<td><input type="Text" name="txtSatu_4" id="txtSatu_4"></td>
			<td><input type="Text" name="txtDua_4" id="txtDua_4"></td>
			<td><input type="Text" name="txtTiga_4" id="txtTiga_4"></td>
			<td><input type="Text" name="txtEmpat_4" id="txtEmpat_4"></td>
			<td><input type="Text" name="txtLima_4" id="txtLima_4"></td>
		</tr>
	</tbody>
</table>

<input type="Button" value="click" onclick="clickButton();">

<script>

function clickButton() {
	// loop sebanyak baris pada table
	for (var i = 1; i <= 4; i++) {
		// array untuk tampung isi dari text box per baris
		var rowValue = [];
		
		// value dari setiap text box per baris
		var satu = document.getElementById("txtSatu_" + i).value;
		var dua = document.getElementById("txtDua_" + i).value;
		var tiga = document.getElementById("txtTiga_" + i).value;
		var empat = document.getElementById("txtEmpat_" + i).value;
		var lima = document.getElementById("txtLima_" + i).value;
		
		// push ke dalam array
		rowValue.push(satu);
		rowValue.push(dua);
		rowValue.push(tiga);
		rowValue.push(empat);
		rowValue.push(lima);
		
		// cek jika ada text box yang memiliki isi
		var hasValue = rowValue.some( function(value, index, array) {
			return value.length > 0;
		});
		
		// jika pada baris current ada text box yang memiliki isi
		if (hasValue) {
			// cek jika setiap text box memiliki isi
			var everyTextBoxHasValue = rowValue.every( function(value, index, array) {
				return value.length > 0;
			});
			
			// jika ada text box yang tidak memiliki isi
			if (!everyTextBoxHasValue) {
				alert('baris ' + i);
			}
		}
	}
}
</script>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: