Projende jquery olduğunu varsayarak paylaşıyorum.
Aşağıdaki iki yöntemden istediğini kullanabilirsin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/sweetalert2.dark.css">
<title>Document</title>
</head>
<body>
<!-- FORM BAŞLA -->
<div class="block-header">
<h3 class="block-title">Kullanıcı Bilgileri</h3>
</div>
<div class="block">
<form class="form-horizontal">
<div class="block-content block-content-full">
<div class="row">
<div class="form-group">
<input type="hidden" name="id" value="<?= $yonetim['id']; ?>">
</div>
<div class="col-lg-8 col-xl-5">
<div class="form-group">
<label>Adı Soyadı</label>
<input type="text" class="form-control" name="kadi" value="<?= $yonetim['kadi']; ?>">
</div>
<div class="form-group">
<label>E-Mail Adresi</label>
<input type="email" class="form-control" name="eposta" value="<?= $yonetim['eposta']; ?>">
</div>
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn btn-outline-info" name="kullaniciduzenle">Güncelle</button>
</div>
</div>
</form>
</div>
<!-- FORM SON -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../assets/js/sweetalert2.min.js"></script>
<script>
$(function () {
$("form").on("submit", function (e) {
e.preventDefault()
// Yöntem 1 başlangıç
/*let formData = new FormData(this),
isEmpty = false
formData.forEach(f => {
if (!f.length) {
Swal.fire({
icon: "error",
title: "Uyarı",
text: "Lütfen boş alan bırakmayın"
})
isEmpty = true
}
})
if (!isEmpty) {
$.ajax('ajax.php', {
method: "POST",
data: formData,
processData: false,
contentType: false,
dataType: "json"
}).done(response => {
Swal.fire({
icon: response.icon,
title: response.title,
text: response.text
})
})
}*/
// Yöntem 1 bitiş
// Yöntem 2 başlangıç
let inputs = {},
err = [],
isEmpty = false
$(this).find("input").each(function () {
let val = $(this).val()
if (val.length) {
inputs[$(this).attr("name")] = val
} else {
err.push($(this).prev("label").text())
isEmpty = true
}
})
if (!isEmpty) {
$.ajax('ajax.php', {
method: "POST",
data: inputs,
dataType: "json"
}).done(response => {
Swal.fire({
icon: response.icon,
title: response.title,
text: response.text
})
})
} else {
Swal.fire({
icon: "error",
title: "Uyarı",
html: `Aşağıdaki alanlar boş bırakılamaz: <br> <span class="text-danger">${err.join(', ')}</span>`
})
}
// Yöntem 2 bitiş
})
})
</script>
</body>
</html>
ajax.php dosyası (senin istek atacağın kendi php dosya adın ile değiştirebilirsin)
<?php
if ($_POST) {
// Burada gelen bilgileri veri tabanına kayıt işlemlerini gerçekleştir ve başarılı veya başarısız olma durumuna göre geriye yanıtı json formatında döndür
// Eğer başarılı ise
echo json_encode([
'icon' => 'success',
'title' => 'Başarılı',
'text' => 'Başarı ile kaydedildi'
]);
// Başarısız ise
echo json_encode([
'icon' => 'error',
'title' => 'Başarısız',
'text' => 'Hata oluştu' // Veya hatanın sebebini kendine göre düzenle
]);
}
Sweetalert css ve js dosyalarını bu adresten edinebilirsin.
Form tamamen boş ise mi, herhangi bir alan boş bırakıldıysa mı uyarı vermek istiyorsunuz?
Json datasını nasıl bir şey olduğunu paylaşırsan veya Bu sayfa üzerinden bir örnek oluşturursan yardımcı olmaya çalışalım
update.php nin ilk kısımlarında html kodları olmaması lazım, sonuca bunları da yazdırıyor çünkü. Ya bu güncelleme kodlarını başka sayfaya alacaksın ya da update.php nin en başlarına html kodlarından önce koyacaksın ve de echo json_encode($array);
den sonra exit();
yazacaksın.
const a = [1,2,3,4]
const b = [3,4,5,2]
const c = a.filter(item => b.includes(item))
console.log(c)
Bu video belki yardımcı olabilir biraz.