Sprawdzanie danych w formularzu - bez przeładowania strony

pytanie zadane 21 grudnia 2019 w PHP przez milogab2004 Początkujący (440 p.)
zamknięte 21 grudnia 2019 przez milogab2004

Dzień dobry,

Mam następujący problem. Chcę zrobić stronę, na której po wpisaniu kodu w input (form) przycisk poniżej zostanie aktywowany (zmiana z "" na "disabled"). Wstępny kod wygląda tak:

		<form name="kod" method="post" id="kod">
		<input type='text' name='kodkarty' maxlength='11' autofocus /></form>
		
		<script type="text/javascript">
		setTimeout("document.forms['kod'].submit()",1500)
		</script>
		
		<?php
			$kodkarty = $_POST['kodkarty'];
			
			if(strlen($kodkarty) == 11){
				$buttonaktywny = "";
			}
			else{
				$buttonaktywny = "disabled";
			}
			
			
		echo<<<END
			<form method="post">
		
			<button type="submit" $buttonaktywny>CLICKME </button>
			
			</form>
END;
?>

W teorii wszystko działa tak jak należy, ale chciałbym, aby input kodu był częścią formularza z button. I tu moje pytanie - jak bez odświeżania strony sprawdzić, czy w input jest wpisany 11-cyfrowy kod i wtedy odblokować przycisk? (przykład na stronie WD MyCloud (login))

Wiem, że odpowiedź jest bardzo prosta, ale jestem początkujący i mam z tym duży kłopot...

Z góry dziękuje.

komentarz zamknięcia: Rozwiązanie problemu

1 odpowiedź

odpowiedź 21 grudnia 2019 przez DawidK Nałogowiec (37,910 p.)
wybrane 21 grudnia 2019 przez milogab2004

Najlepsza

Sprobuj keyup event na pole inut.

index.html (z JS)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <form>
        <input id='input' type='text' maxlength='11'>
        <button type='submit' id='submit-button' disabled>wyslij</button>
    </form>

    <script>
        const input = document.querySelector('#input');
        const submitButton = document.querySelector('#submit-button');

        input.addEventListener('keyup', checkEnable);

        function checkEnable(){
            if(input.value.length === 11){
                submitButton.disabled = false;
            } else {
                submitButton.disabled = true; 
            }
        }
    </script>


    
</body>
</html>