[인풋값 가져오기(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값을 변경해서 버튼으로 만들 수도 있습니다.
위의 폼코드와 스크립트 코드, a태그 링크코드가 하나의 페이지에 있다면 인풋값 가져오기로 새로운 링크를 보내는 것은 간단합니다.
