ariefajar
/
MIF_E31221322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(profile): add function disable update button

This commit is contained in:
arieeefajar 2025-05-15 15:22:20 +07:00
parent 23894e0978
commit f60f3ef8fb
2 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/assets/js/pages/customJs/auth/profile.js
View File

@ -1,3 +1,52 @@
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("personalDetailsForm");
const submitBtn = document.getElementById("submit-btn");
const inputs = form.querySelectorAll(
'input[type="text"],input[type="email"],input[type="file"]'
);
submitBtn.disabled = true;
function isFormChanged() {
for (const input of inputs) {
const initial = input.dataset.initial;
const current =
input.type === "file" ? input.files.length > 0 : input.value;
if (initial !== undefined && current !== initial) {
return true;
}
}
return false;
}
inputs.forEach((input) => {
input.addEventListener("input", () => {
submitBtn.disabled = !isFormChanged();
});
if (input.type === "file") {
input.addEventListener("change", () => {
submitBtn.disabled = !isFormChanged();
});
}
});
});
function setDataUser() {
const dataUser = document.getElementById("data-user").value;
const data = JSON.parse(dataUser);
const usernameElement = document.getElementById("username");
const fullnameElement = document.getElementById("name");
const emailElement = document.getElementById("email");
const submitBtn = document.getElementById("submit-btn");
submitBtn.disabled = true;
usernameElement.value = data.username;
fullnameElement.value = data.name;
emailElement.value = data.email;
}
function previewImage(event) {
var input = event.target;
var reader = new FileReader();

23
resources/views/auth/profile.blade.php
View File

@ -54,12 +54,14 @@ class="rounded-circle avatar-xl img-thumbnail user-profile-image"
@csrf
@method('PUT')
<div class="row">
<input type="hidden" id="data-user" value="{{ $user }}">
<div class="col-lg-6">
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username"
placeholder="Masukan username anda" name="username"
value="{{ old('username', $user->username) }}" required>
value="{{ old('username', $user->username) }}"
data-initial="{{ $user->username }}" required>
<div class="invalid-feedback">
Harap masukan username anda
</div>
@ -71,7 +73,8 @@ class="rounded-circle avatar-xl img-thumbnail user-profile-image"
<label for="fullname" class="form-label">Nama Lengkap</label>
<input type="text" class="form-control" id="name"
placeholder="Masukan nama lengkap anda" name="name"
value="{{ old('name', $user->name) }}" required>
value="{{ old('name', $user->name) }}"
data-initial="{{ $user->name }}" required>
<div class="invalid-feedback">
Harap masukan nama lengkap anda
</div>
@ -83,7 +86,8 @@ class="rounded-circle avatar-xl img-thumbnail user-profile-image"
<label for="emailInput" class="form-label">Alamat Email</label>
<input type="email" class="form-control" id="email"
placeholder="Masukan alamat email anda" name="email"
value="{{ old('email', $user->email) }}" required>
value="{{ old('email', $user->email) }}"
data-initial="{{ $user->email }}" required>
<div class="invalid-feedback">
Harap masukan alamat email anda
</div>
@ -101,8 +105,10 @@ class="rounded-circle avatar-xl img-thumbnail user-profile-image"
<!--end col-->
<div class="col-lg-12">
<div class="hstack gap-2 justify-content-end">
<button type="submit" class="btn btn-success">Ubah</button>
<button type="button" class="btn btn-soft-secondary">Batal</button>
<button type="submit" class="btn btn-success" id="submit-btn"
disabled>Ubah</button>
<button type="button" class="btn btn-soft-secondary" id="cancel-btn"
onclick="setDataUser()">Batal</button>
</div>
</div>
<!--end col-->
@ -156,13 +162,6 @@ class="rounded-circle avatar-xl img-thumbnail user-profile-image"
</div>
</div>
<!--end col-->
{{-- <div class="col-lg-12">
<div class="mb-3">
<a href="javascript:void(0);"
class="link-primary text-decoration-underline">Lupa Password ?</a>
</div>
</div> --}}
<!--end col-->
<div class="col-lg-12">
<div class="text-end">
<button type="submit" class="btn btn-success">Ubah Password</button>