유지연

유지연

I’m a junior web developer.
Let’s code with me!

2021-03-02 TIL(at work)

업데이트:
1 분 소요

HTML

여러 개의 <form> 사용

  • 이전에 주어진 업무를 수행하면서, 하나의 HTML 파일에 여러개의 <form>를 사용한 적이 었었다. 사용자가 입력한 값에 따라 DB에서 가져오는 데이터가 달라지고, 이에 따라 화면의 구성이 달라지는 방식으로 html파일과 js파일이 구성되어 있었다. 여기에 초기화 버튼을 삽입하면서, 초기화 버튼이 작동하는 범위를 지정하기 위해 <form> 태그를 사용했다. 그런데 문제는, html 파일에 존재하는 모든 <input> 태그의 값을 초기화 하는 것이 아니라, 몇가지 특정 값만 초기화를 하도록 해야 했기 때문에 발생했다.
<!DOCTYPE html>
<html>

    <head>
        <title>Example</title>
    </head>

    <body>
        <select id="select1">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>						
            <option value="4">Four</option>
        </select>

        <form>
            <input type="text" id="data1" placeholder="텍스트 입력">
            <input type="text" id="data2" placeholder="텍스트 입력">
        </form>

        <input type="text" id="data3" placeholder="텍스트 입력">
        <input type="text" id="data4" placeholder="텍스트 입력">

        <form>
            <select id="select2">
                <option value="1">First</option>
                <option value="2">Second</option>
                <option value="3">Third</option>
                <option value="4">Fourth</option>
            </select>

            <input type="text" id="data5" placeholder="텍스트 입력">
            <input type="number" id="data6" placeholder="숫자 입력"/>

            <button type="reset" class="btn">초기화</button>
        </form>
    </body>

</html>
  • 위와 같이 코드를 작성하니 초기화 버튼은 의도대로 동작했지만, 해당 화면의 다른 곳에서 페이지가 제대로 로딩되지 않는 오류가 발생했다. 한 페이지에서 여러 개의 <form> 태그를 사용할 경우 각각이 어떤 <form>인지 명확하게 코드를 작성하면 문제가 없지만, 내가 작성한 코드와 같이 애매하게 <form>를 사용하면 페이지가 새로 로딩될 때 문제가 발생할 가능성이 있다고 한다. 가끔은 페이지가 제대로 로딩 되기도 했지만, 대체적으로 문제가 발생했다.
  • 특정 값들의 입력 값만 삭제하는 초기화 버튼의 기능을 구현하면서도 페이지가 제대로 로딩되도록 하기 위해 html 파일에서 <form> 태그는 하나만 사용하고, 초기화 버튼에 id를 부여한 후 javaScript 파일에 이벤트를 생성했다.
<!DOCTYPE html>
<html>

    <head>
        <title>Example</title>
    </head>

    <body>
        <select id="select1">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>						
            <option value="4">Four</option>
        </select>

        <form>
            <input type="text" id="data1" placeholder="텍스트 입력">
            <input type="text" id="data2" placeholder="텍스트 입력">
            <input type="text" id="data3" placeholder="텍스트 입력">
            <input type="text" id="data4" placeholder="텍스트 입력">
            
            <select id="select2">
                <option value="1" selected>First</option>
                <option value="2">Second</option>
                <option value="3">Third</option>
                <option value="4">Fourth</option>
            </select>

            <input type="text" id="data5" placeholder="텍스트 입력">
            <input type="number" id="data6" placeholder="숫자 입력"/>

            <button type="reset" class="btn" id="btnReset">초기화</button>
        </form>
    </body>

</html>

    $('#btnReset').click(function(){
        $('#data1').val('');
        $('#data2').val('');
        $('#select2').val('1').prop("selected",true);
        $('#data5').val('');
        $('#data6').val('');
    });
  • 출처 : https://stackoverflow.com/questions/12064557/multiple-form-tags-in-page-or-one-form-tag

태그:

카테고리:

업데이트:

참고

2022-02-22 TIL(at work)

업데이트:
5 분 소요

업무 배경 이 업무가 할당된 이유 회사에서 맡고 있는 서비스 중, 회원이 구매를 신청하면 정부24에서 그 컨텐츠를 구매하여 제공을 하는 서비스가 있다. (참고로, 구매를 한다고 바로 완료되는게 아니라 구매 로직을 태운 후 실제로 컨텐츠를 가져오기까지 어느정도 시간이 소요된다....