Merhaba @volkanyyilmaz ve @Mustafa1379,
Arkadaşlarınızın önerdiği gibi,
SweetAlert veya
toastr gibi araçları kullanmanızı kesinlikle tavsiye ederim.
Bu araçlar, kullanıcıya daha hoş ve etkileyici bildirimler sunmanıza yardımcı olabilir.
Ben de Sweet Alert üzerinden bir örnek hazırladım.
Umarım bu örnek, konunun daha iyi anlaşılmasına yardımcı olur:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-type: application/json');
sleep(1); // Aksiyonu görmek için azıcık yavaşla
// gelen POST verilerini veritabanına aktaracağımız bölüm
exit(json_encode(array('status' => true)));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal Örneği</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rubik:400,500,600,700,800&subset=latin-ext">
<link rel="stylesheet" type="text/css" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
<style type="text/css">
body{font-family:Rubik;font-size:13px;background:#f9f9f9}
main{padding-top:200px}
.box{box-shadow:rgba(0,0,0,.1) 0 6px 18px;border-radius:16px;background:#fff;overflow:hidden;max-width:340px;margin:0 auto}
.box-headline{padding:15px 25px;border-bottom:1px solid #eee}
.box-headline h3{font-size:13px;font-weight:500;margin:0}
.box-body{padding:15px 25px}
.field{margin-bottom:1rem}
.field.last{margin-bottom:0}
.field label{user-select:none;display:block;text-transform:uppercase;letter-spacing:-.5px;font-size:12px;margin-bottom:5px;margin-left:5px;opacity:.7;font-weight:600;color:#555;transition:all 0.3s ease-in-out}
.field .input{display:flex;align-items:center;background-color:#fff;transition:all 0.3s ease-in-out;border:1px solid #ced4da;border-radius:6px;overflow:hidden}
.field .input i.fa{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:100%;background-color:#ddd;margin-right:10px}
.field .input input:focus,
.field .input textarea:focus{outline:none}
.field .input input,.field .input textarea{font:inherit;flex:1 auto;display:inline-block;border:0;padding:0 15px;height:40px;line-height:40px}.field .input textarea{padding:15px;line-height:inherit;resize:none}
.field button{cursor:pointer;width:100%;display:inline-block;background-color:#000;padding:0 20px;border-radius:3px;font:inherit;font-weight:500;height:47px;border:0;color:#fff;border:0;line-height:47px}
.field button.passive{background-color:#CCC;color:#999;cursor:not-allowed}
.swal2-title{font-size:15px!important}
.swal2-styled.swal2-confirm{background-color:#000!important;font-size:13px!important}
.swal2-styled.swal2-confirm:hover{background-color:#333!important}
.swal2-styled.swal2-deny{background-color:#bdc3c7!important;font-size:13px!important}
.swal2-styled.swal2-confirm:focus,.swal2-styled.swal2-deny:focus{box-shadow:none!important}
.swal2-html-container{font-size:13px!important}
.swal2-actions button{height:inherit;line-height:inherit}
</style>
</head>
<body>
<main>
<div class="box">
<div class="box-headline">
<h3>Talep Formu</h3>
</div>
<div class="box-body">
<form method="" method="POST">
<div class="field">
<label>Adınız Soyadınız</label>
<div class="input">
<input type="text" name="fullname">
<i class="fa fa-user"></i>
</div>
</div>
<div class="field">
<label>Telefon Numaranız</label>
<div class="input">
<input type="text" name="gsm">
<i class="fa fa-phone"></i>
</div>
</div>
<div class="field">
<label>Mesajınız</label>
<div class="input">
<textarea>HTML ile bir form gönderirken modal açtırmak istiyorum</textarea>
</div>
</div>
<div class="field last">
<button class="passive">Beni Arayın</button>
</div>
</form>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
// NProgress konfigürasyonu
NProgress.configure({ parent: ".box" });
// Formdaki girdi alanlarına her tuşa basıldığında tetiklenen işlev
$("form input, form textarea").on("input", function() {
var formCheck = ($("input[name=fullname]").val() !== "" && $("input[name=gsm]").val() !== "" && $("textarea[name=message]").val() !== "");
$("form button").toggleClass("passive", !formCheck);
});
// Formdaki butona tıklanıldığında tetiklenen işlev
$("form button").click(function(event) {
event.preventDefault();
var errors = [];
// Girdi alanlarını kontrol et ve hataları topla
if ($("input[name=fullname]").val() === "") {
errors.push("Lütfen Adınızı Soyadınızı girin.");
}
if ($("input[name=gsm]").val() === "") {
errors.push("Lütfen Telefon Numaranızı girin.");
}
if ($("textarea[name=message]").val() === "") {
errors.push("Lütfen Mesajınızı girin.");
}
// Hata varsa uyarı göster ve işlemi sonlandır
if (errors.length > 0) {
Swal.fire({
icon: "error",
title: "Eksik Bilgi Uyarısı",
html: errors.join("<br>"),
confirmButtonText: "Tamam"
});
return;
}
// Form gönderimi için ilerleme çubuğunu başlat
NProgress.start();
// AJAX isteği gönder
$.ajax({
url: "",
type: "POST",
dataType: "JSON",
data: $(".box form").serialize(),
success: function(json) {
NProgress.done();
if (json.status) {
// Başarılı gönderim durumunda girdi alanlarını temizle
$("form input, form textarea").val("");
Swal.fire({
icon: "success",
html: "Talep formunuz başarıyla gönderildi",
confirmButtonText: "Tamam"
});
}
}
});
});
</script>
</body>
</html>