PHP

[PHP] 구구단

98kg 2024. 2. 22. 20:04 
action="<?php echo $_SERVER['PHP_SELF']; ?>

 

HTML 폼(form)의 작업(action)을 현재 PHP 파일에 있는 서버의 자기 자신(PHP_SELF)으로 설정하는 것을 의미합니다. 이 작업은 폼이 제출(submit)될 때, 데이터를 처리하고 결과를 보여줄 PHP 스크립트를 현재 파일로 설정하여 해당 파일 내에서 데이터를 처리할 수 있도록 합니다.

 

 

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 입력을 통한 구구단 출력</title>
</head>
<body>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form1" >
        <label for="dan">출력하고자 하는 단을 입력하세요.</label><br>
        <input type="text" name="dan" id="dan" autocomplete="off">
        <button  id="submit_btn">구구단 출력</button>
    </form>

    <?php
        if(isset($_POST['dan']) && $_POST['dan'] != ''){
            if(is_numeric($_POST['dan'])){
                for($i = 1; $i <= 9; $i++){
                    echo $_POST['dan'].'x'.$i.'='.$_POST['dan'] * $i.'<br>';
                }
            }
        }
    ?>

    <script>
        const submit_btn = document.querySelector('#submit_btn');
             
        submit_btn.addEventListener('click', (e) =>{
            const dan = document.querySelector('#dan');
            if(dan.value === ''){
                e.preventDefault(); // 폼 전송을 막음
                alert('입력란을 비우지마세여.');
                dan.focus();
                return false;
            }
            if(isNaN(dan.value)){
                alert('숫자를 입력해주세요');
                dan.focus();
                return false;
            }

            document.form1.submit();
        });
    </script>
</body>
</html>

 

 

<script>
        const submit_btn = document.querySelector('#submit_btn');
             
        submit_btn.addEventListener('click', (e) =>{
            const dan = document.querySelector('#dan');
            if(dan.value === ''){
                e.preventDefault(); // 폼 전송을 막음
                alert('입력란을 비우지마세여.');
                dan.focus();
                return false;
            }
            if(isNaN(dan.value)){
                alert('숫자를 입력해주세요');
                dan.focus();
                return false;
            }

            document.form1.submit();
        });
    </script>
이 부분에 대한 설명입니다.
  1. const submit_btn = document.querySelector('#submit_btn');: HTML 문서에서 id가 "submit_btn"인 요소를 찾아 submit_btn 변수에 할당합니다.
  2. submit_btn.addEventListener('click', (e) => { ... });: submit_btn 요소에 클릭(click) 이벤트를 추가하고, 클릭 이벤트가 발생했을 때 실행할 함수를 정의합니다. 이 함수는 인자로 이벤트 객체 e를 받습니다.
  3. 이벤트 함수 내부:
    • const dan = document.querySelector('#dan');: HTML 문서에서 id가 "dan"인 요소를 찾아 dan 변수에 할당합니다.
    • if(dan.value === '') { ... }: dan 요소의 값이 비어있는지 확인합니다. 비어있으면 다음 동작을 수행합니다:
      • e.preventDefault();: 폼의 제출을 막습니다.
      • alert('입력란을 비우지마세여.');: 경고창을 띄워 사용자에게 메시지를 표시합니다.
      • dan.focus(); : dan 요소로 포커스를 이동시킵니다.
      • return false; : 함수 실행을 중단합니다.
    • if(isNaN(dan.value)) { ... }: dan 요소의 값이 숫자가 아닌지 확인합니다. 숫자가 아니면 다음 동작을 수행합니다:
      • alert('숫자를 입력해주세요');: 경고창을 띄워 사용자에게 메시지를 표시합니다.
      • dan.focus();: dan 요소로 포커스를 이동시킵니다.
      • return false;: 함수 실행을 중단합니다.
    • document.form1.submit();: 위의 두 조건을 모두 통과하면 form1이라는 이름을 가진 폼을 제출합니다. 여기서 "form1"은 폼의 이름입니다.

이 스크립트는 사용자가 숫자를 입력하지 않거나 입력란을 비웠을 때 경고 메시지를 표시하고, 제출을 막거나 폼을 제출합니다.

 

결과

 

 

아무것도 입력하지 않았을 때

숫자 외의 값을 입력했을 때

숫자 5를 입력했을 때