17 Haziran 2024 Pazartesi

Enter tuşuna basıldığında get ile form verisi gönderilsin,sonrasında form temizlensin

 Enter tuşuna basıldıktan sonra form verisi gönderildiğinde ve form verisi gönderildikten sonra da kart_id id'li input alanının içeriğinin temizlenmesini istiyorsunuz. Bu durumu aşağıdaki örnekteki gibi gerçekleştirebiliriz.


<!DOCTYPE html>

<html>

<head>

    <title>Kart Okutma</title>

    <script>

        function handleKeyPress(event) {

            if (event.keyCode === 13) { // Enter key

                event.preventDefault(); // Enter tuşunun varsayılan davranışını engelle

                document.getElementById("myForm").submit(); // Formu gönder

                document.getElementById("kart_id").value = ""; // kart_id inputunu temizle

            }

        }

    </script>

</head>

<body>

    <h1>Kartınızı Okutunuz</h1>

    <form id="myForm" action="/submit" method="post" onkeypress="return handleKeyPress(event)">

        <input type="number" name="kart_id" id="kart_id" autofocus required autocomplete="off" style="width: 512px; height: 90px; font-family: Tahoma; font-size: 24pt; vertical-align: middle" size="16">

        <input type="submit" value="Gönder">

    </form>

</body>

</html>


Bu kod içinde, handleKeyPress() adlı JavaScript fonksiyonu şekilde ayarlanmıştır. Bu fonksiyon, Enter tuşuna basıldığında formun gönderilmesini sağlarken aynı zamanda kart_id id'li input alanının içeriğini temizlemek için de gerekli işlemi gerçekleştirir.

Bu şekilde, Enter tuşuna bastıktan sonra form verisi gönderilecek ve form verisi gönderildikten sonra da kart_id id'li input alanının içeriği temizlenecektir.

Hiç yorum yok: