특정페이지에서 어떤 버튼을 클릭했을때 특정 정보를 URL 파라미터로 전송하도록 해보자.
<a class=”apply-button” href=”https://englishtutoring.kr/%EA%B3%BC%EC%99%B8%EC%8B%A0%EC%B2%AD/?tutor=${encodeURIComponent(tutor.display_name)}” target=”_blank”>과외신청</a>
위 코드를 보면 display_name이라는 정보를 이동할 페이지로 넘겨주고 있다.
아래 코드를 보면 그 정보를 받아 특정 input에 받아오고 있다.
<tr id=”tutor-row” style=”display:none;”> <th>희망교사</th> <td><input type=”text” id=”tutor_name” name=”tutor_name” readonly /></td> </tr>
<script> document.addEventListener(‘DOMContentLoaded’, function() { const urlParams = new URLSearchParams(window.location.search); const tutorName = urlParams.get(‘tutor’); if (tutorName) { document.getElementById(‘tutor_name’).value = tutorName; document.getElementById(‘tutor-row’).style.display = ”; } }); </script>
상기 코드는 예시일 뿐이다. 여러분은 페이지의 특정에 맞게 응용하면 된다.