Pweb 7 Implementasi javascript pada form
Nama : Afel Allaric Absor
NRP : 5025231140
Kelas : Pweb (E)
Implementasi Jvascript pada form
- index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran Siswa Baru</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Formulir Pendaftaran Siswa Baru</h1>
<form id="formDaftar" action="proses-daftar.php" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">
<div id="nama-error" class="error"></div>
<label for="alamat">Alamat:</label>
<textarea id="alamat" name="alamat"></textarea>
<div id="alamat-error" class="error"></div>
<label>Jenis Kelamin:</label>
<label><input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki</label>
<label><input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan</label>
<div id="jenis-kelamin-error" class="error"></div>
<label for="agama">Agama:</label>
<select id="agama" name="agama">
<option value="">-- Pilih Agama --</option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Konghucu">Konghucu</option>
</select>
<div id="agama-error" class="error"></div>
<label for="sekolah_asal">Sekolah Asal:</label>
<input type="text" id="sekolah_asal" name="sekolah_asal">
<div id="sekolah-asal-error" class="error"></div>
<button type="button" id="submitButton">Daftar</button>
</form>
<script src="script.js"></script>
</body>
</html>
- styles.css :
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
width: 300px;
margin: auto;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea, button {
width: 100%;
margin-bottom: 10px;
padding: 8px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.error {
color: red;
font-size: 0.9em;
}
- script.js :
document.getElementById('submitButton').addEventListener('click', function(event) {
// Prevent default form submission
event.preventDefault();
// Get form fields
const nama = document.getElementById('nama').value.trim();
const alamat = document.getElementById('alamat').value.trim();
const jenisKelamin = document.querySelector('input[name="jenis_kelamin"]:checked');
const agama = document.getElementById('agama').value;
const sekolahAsal = document.getElementById('sekolah_asal').value.trim();
let isValid = true;
// Clear previous error messages
document.querySelectorAll('.error').forEach(el => el.textContent = '');
// Validate each field
if (nama === "") {
document.getElementById('nama-error').textContent = "Nama harus diisi.";
isValid = false;
}
if (alamat === "") {
document.getElementById('alamat-error').textContent = "Alamat harus diisi.";
isValid = false;
}
if (!jenisKelamin) {
document.getElementById('jenis-kelamin-error').textContent = "Jenis kelamin harus dipilih.";
isValid = false;
}
if (agama === "") {
document.getElementById('agama-error').textContent = "Agama harus dipilih.";
isValid = false;
}
if (sekolahAsal === "") {
document.getElementById('sekolah-asal-error').textContent = "Sekolah asal harus diisi.";
isValid = false;
}
// Submit form if valid
if (isValid) {
document.getElementById('formDaftar').submit();
}
});
Kode diatas java scriptnya berfungsi untuk mengecek kebenaran dari form (apakah sudah diisi semua untuk data yang akan dimasukkan).
- Hasil kode saat dijalankan :
- Repository github berisi source code : https://github.com/afelallaric/Pweb-7-Javascript.git
Komentar
Posting Komentar