Sweetalert form kontrolü

cowex 959 gün önce

748 defa görüntülendi

Merhaba arkadaşlar bi form bloğum var ve form kontrolü yaptırmak istiyorum. Bunuda sweetalert ile sadece form boş ise uyarı ekrana gelsin ama tamam butonuna basıldıktan sonra sayfayı yenilemesin eski halinde kalsın istiyorum. Kodlarımın arasına nasıl ekleyebilirim yardımcı olursanız sevinnirim.

                    <!-- FORM BAŞLA -->
                    <div class="block-header">
                        <h3 class="block-title">Kullanıcı Bilgileri</h3>
                    </div>
                    <div class="block">
                        <form method="POST" enctype="multipart/form-data" class="form-horizontal" action="islemler2.php">
                            <div class="block-content block-content-full">
                                <div class="row">
                                    <div class="form-group">
                                        <input type="hidden" name="id" value="<?php echo $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="<?php echo $yonetim['kadi']; ?>"  />
                                    </div> 
                                    <div class="form-group">
                                        <label>E-Mail Adresi</label>
                                        <input type="email" class="form-control" name="eposta" value="<?php echo $yonetim['eposta']; ?>" required />
                                    </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 -->

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

1
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (9)

abdullahx

958 gün önce

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/bootstrap@5.0.2/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.

#010977

cowex

953 gün önce

teşekkürler @abdullahx hocam gayet olumlu düzgün çalışıyor elinize sağlık

#011009

abdullahx

955 gün önce

if($kaydet->rowCount()){
...

olarak değiştir

#010997

cowex

957 gün önce

@abdullahx Hocam arkaplanda yapılan işlem işlem kodlarını gönderiyorum

 if($_POST){
$kadi     = post('kadi');
$eposta = post('eposta');
     $kaydet = $db->prepare("UPDATE yoneticiler SET
        kadi  =:k,
        eposta=:e
        WHERE id={$_POST['id']}");
    $id=$_POST['id'];
    $kaydet->execute([
        ':k' => $kadi,
        ':e' => $eposta
    ]);
    if($kaydet){
            echo json_encode([
    'icon' => 'success',
    'title' => 'Başarılı',
    'text' => 'Başarı ile kaydedildi'
]);
    }else{
        echo json_encode([
    'icon' => 'error',
    'title' => 'Başarısız',
    'text' => 'Hata oluştu'
]);
    }
}

#010985

abdullahx

958 gün önce

Arka plan kontrollerini nasıl yaptığına bağlı, onun hakkında kodları görmeden bir şey söyleyemem.

#010979

cowex

958 gün önce

@abdullahx teşekkür ediyorum yanıtın için sonuç tam istediğim gibi oldu. Geri dönüşleri de yakalıyorum sorunsuz çalışıyor. Fakat hatayıda denemek için database ismini değiştirdim kaydet deyince yine başarılı sonuç dönüyor databaseye değişiklik yapmamasına rağmen başarılı döndü onu anlayamadım.

#010978

cowex

958 gün önce

her ikisi içinde hem komple boş hemde 1 tane input boş ise yine uyarı versin.

#010976

abdullahx

958 gün önce

Form tamamen boş ise mi, herhangi bir alan boş bırakıldıysa mı uyarı vermek istiyorsunuz?

#010975

kargasa1982

958 gün önce

formu ajax ile gönderirsen, ilk satırda e.preventDefault() yaparsan form ve sayfa yenileme yapmaz. Sende o arada istediğin işlemi kontrol edip yaptırabilirsin.

#010973