Javascript Form Parameter

2017-03-21

2024-06-10

JavaScript form parameter 데이터값 전송시 처리 방법

form은 서버에 url 전송시 action에 파라미터값까지 처리하면 브라우저에서 제대로 작동하지 않는다.
사용자가 입력하거나 선택하는 정보는 아니지만 폼 전송이 같이 전송해줘야 하는 정보를 담기 위해서 히든 필드(Hidden Field)를 사용해야 한다.
hidden 필드는 화면에 출력되는 부분이 아니기 때문에 브라우저에 아무런 영향을 미치지 않지만 값을 가지고 있다.

다음 예제 코드들을 한번 살펴보자.

form 잘못된 예

1
2
3

<form method="get" action="/lib/ajax.class.member.php?action=find-user&search_nick=테스트" id="searchConnectorForm">
    ...
</form>

위와 같이 하면 브라우저에 출력되는 form 태그는 <form method=”get” action=”/lib/ajax.class.member.php”> 이렇게 파라미터값이 빠진 채로 출력되게 된다.

form 올바른 예

<form method="get" action="/lib/ajax.class.member.php" id="searchConnectorForm">
    <input type="hidden" name="action" value="find-user">
    <input type="hidden" name="search_nick" value="테스트">
    ...
</form>

처리방법은 파라미터값을 전달하려면 <input type=”hidden”> 태그를 추가해서 넣으면 된다.

전체 예제 코드는 다음과 같다.

<form method="get" action="/lib/ajax.class.member.php?" id="searchConnectorForm">
    <input type="hidden" name="action" value="find-user">
    <input type="hidden" name="search_nick">
    <fieldset>
    <legend class="blind">회원겁색영역</legend>
        <div class="inpt_group">
            <input type="text" placeholder="검색할 회원의 닉네임을 입력해 주세요.>
            <button type="submit">검색</button>
        </div>
    </fieldset>
</form>

<div id="chat_list">
    <!-- 채팅 내용이 이곳에 동적으로 할당됨 -->
</div>

ajax 연동 샘플(jauery 기준)

/**
 * showSearchFriendList
 * @description 회원검색 리스트를 보여준다.
 * @param {String} METHOD - Form Method Type
 * @param {String} HTTP_API - Form Action url
 */
var showSearchFriendList = function(METHOD, HTTP_API) {
    $[METHOD](HTTP_API, function(data) {
        var online_css = '';
        var $noDataHTML = $('<p class="nodata"><strong>등록된 회원이 없습니다.</strong></p>');
        var $userListHTML = $('<ul class="search-list" />');
        var $frag = $(document.createDocumentFragment());
        
        if ( data.user === null ) {
            $("#chat_list").html($noDataHTML);
            
            return false;
        }
        
        $.each(data.user, function(i, v) {
            if ( v.is_online ) { online_css = 'on'; }
            
            $frag.append(
                '<li class="member_list_li chat_nick user-layer-pop-left" user-attr-id="' + v.mb_id + '" user-attr-layer-type="live">' +
                    '<span class="online ' + online_css + '"></span>' +
                    '<img src="/img/lv/16/' + v.mb_level+'.png">' +
                    '<b>'+v.mb_nick+'</b>' +
                '</li>'
            );
        });
        
        $userListHTML.append($frag[0]);
        $("#chat_list").html($userListHTML);
    }, 'json');
};

//회원검색창 검색 폼 전송 이벤트 핸들러
$('#searchConnectorForm').on('submit', function(e) {
    e.preventDefault();
    
    var $this = $(this);
    var inputSrchVal = $.trim($this.find(':text').val());
    var METHOD = $this.attr('method'),
        HTTP_API = $this.attr('action'),
        params = '';
    
    if ( inputSrchVal.length < 2 ) {
        return false;
    }
    
    $this.children(':hidden[name=search_nick]').val(inputSrchVal);
    params = $this.serialize();
    
    showSearchFriendList(METHOD, HTTP_API + params);
});

FrontendJavascript

JavaScript form parameter 데이터값 전송시 처리 방법