관리 메뉴

키스세븐

인풋값 가져오기(input값 가져오기) 해서 링크로 보내기 본문

홈피와 블로그

인풋값 가져오기(input값 가져오기) 해서 링크로 보내기

키스 키스세븐 2018. 10. 1. 18:32
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.

[인풋값 가져오기(input값 가져오기) 해서 링크로 보내기] 




인풋값 가져오기


인풋(input)은 여러 가지 경우에서 자주 볼 수 있습니다.

검색창에 입력을 한다든지, 회원가입을 한다든지 하는 모든 입력행위는 웹페이지 의 글자입력 상자를 통하는 것입니다.

이 인풋을 만드는 가장 대표적인 것이 form의 value값입니다. 대부분의 검색창은 바로 이 form으로 되어 있습니다. 


이 글에서는 form의 value값을 가져오기 해서 링크로 새창을 띄우는 코드 소스에 대해 알아 보려고 합니다.

사용자가 아직 검색을 하지 않았어도 입력된 input값을 가져오기해서 그 값으로 검색엔진으로 연결하는 예입니다. 


input값 가져오기을 가져오기해서 링크로 보내기 위해서는 다음 세 가지가 필요합니다. form문과 스크립트의 location.href문과 링크 태그의 onclick입니다.


일단 input값 불러오기 코드 이전에 form문을 준비해야 합니다. 아주 일반적인 코드입니다.

    <form name="fsearchbox" method="get" action="사이트주소/파일명.php" onsubmit="return fsearchbox_submit(this);">

                    <input type="hidden" name="sfl" value="wr_subject||wr_content">

                    <input type="hidden" name="sop" value="and">

                    <input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="검색어 입력">

                    <button type="submit" id="sch_submit" value="검색">검색</button>

    </form>


그럼 이제부터 본격적인 인풋값 가져오기가 시작됩니다. 사용자가 엔터를 누르지 않아도 웹페이상에 입력된 글자를 알아오는 방법입니다.


같은 웹페이지의 적당한 곳에 아래와 같은 스크립트 코드를 넣습니다.

    <script>

    function linksearch(val) { // 임의로 정한 이름인 linksearch라는 기능코드 시작

    var newWindow = window.open("about:blank"); // 새 윈도창으로 넘기라는 코드

    newWindow.location.href="사이트주소/검색 쿼리"+val; // 인풋값 가져오기한 값을 지정된 주소로 보내는 구문

    } // 기능코드 종료

    </script>


위의 코드는 input값 가져오기 이전에 미리 준비된 스크립트입니다. 이후에 링크 클릭이 발생하면 이 코드를 불러서 새로운 창을 열며 입력된 값을 보내게 됩니다. 중요한 것은 사용자가 엔터를 치거나 해서 페이지가 입력된 값을 아직 저장하지 않았어도 입력된 텍스트 문장을 읽어 올 수 있다는 것입니다.





인풋값 가져와서 링크보내기


여기에서 var newWindow = window.open("about:blank");를 빼버리면 현재 창에서 링크페이지로 이동합니다.

또한 "사이트주소/쿼리" 부분에 검색엔진의 쿼리 코드를 입력하면 바로 검색엔진을 실행시킬 수도 있습니다.


예를 들어, 키스세븐 검색기능을 연결하자면 이렇게 됩니다.

    newWindow.location.href="http://www.kiss7.kr/db/search.php?stx="+val;


다음은 핵심이 되는 인풋값 가져오기 코드 소스입니다. 실제로는 input값 가져오기가 아니라 링크로 연결해 주는 코드라고 하겠습니다.

    <a href="#" onclick="linksearch(fsearchbox.stx.value);">검색</a> // fsearchbox라는 폼값으로 linksearch를 실행하라는 구문


"검색"이라는 링크를 누르면 인풋값 가져오기를 해서 키스세븐 검색 쪽으로 넘기라는 링크코드입니다. 물론 type값을 변경해서 버튼으로 만들 수도 있습니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)


위의 폼코드와 스크립트 코드, a태그 링크코드가 하나의 페이지에 있다면 인풋값 가져오기로 새로운 링크를 보내는 것은 간단합니다.

키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

0 Comments
댓글쓰기 폼