JavaScript

jQuery 버튼 누르면 input창에 그대로 가져오기

우아개발자 2023. 12. 1.

우리가 로그인 화면을 작성할 때, 버튼을 누르면 input창에 데이터를 가져올 수 있도록 하는 것이 있나요? input창에 데이터를 가져오려면 어떻게 해야할까요? 이때 jQquery를 사용해서 가져올 수 있을텐데요. 이때 jQuery 사용법을 알려드릴게요.

서론

JQuery 실습을 위한 HTML 코드

jQuery 실습을 위한 html 코드를 보여드릴게요. html을 이용해서 아래와 같은 창을 일단 만들어볼거에요. input 창 두개, 그리고 "선택"이라는 버튼을 클릭할 수 있는 것과 radio 스타일의 버튼 두개, select문의 내용과 option의 내용이 몯 ㅜ포함되어있죠. 그리고 마지막에는 fieldset 코드가 함께 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery_form</title>
    <script type="text/javascript" src="./js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript" src="./js/jQuery.form1.js"></script>
</head>
<body>
    <form>
		<input type="text"/>
		<input type="text" readonly="readonly"/>
		<input type="button" value="선택" onclick="choice() "/>
		<input type="radio" value="수강 과정명" onclick="choice2()"/>
		<input type="checkbox" 
			value="자바 웹 개발자 양성" onclick="choice3()"/>
		<div id="a">
			 자바 웹 개발자 양성
		</div>
		<select style="width: 200px;">
			<option>===== 선택하세요 =====</option>
			<option value="HTML">HTML</option>
			<option value="CSS">CSS</option>
			<option value="JavaScript">JavaScript</option>
			<option value="jQuery">jQuery</option>
		</select>
		<fieldset style="width: 200px;">
			<legend>성별</legend>
			<label>
				<input type="radio" name="gender" value="남자"/>남자
			</label>
			<label>
				<input type="radio" name="gender" value="여자"/>여자
			</label>
		</fieldset>
	</form>

</body>
</html>

본론

너무 길어서 코드를 못 보셨다면, 아래의 html을 참고하시길 바랍니다. html를 보면 choice() 메서드와 연결되어있는 것이 보이시죠. 이제 제이쿼리로 돌아가 choice() 메서드를 보도록 할게요.

<input type="button" value="선택" onclick="choice() "/>

1. 제이쿼리에서 input의 테스트 값을 불러올겁니다. $('태그:속성')

input태그 중에서 속성값을 모두 선택해서 가져오기를 할텐데요. 배열의 형태로 가져올 것이기 때문에 eq를 설정하고 (0)으로 적어줍니다. val(); 는 value 값을 가져와야하기 때문에 작성하는 것인데요. value 값을 적어야하는데 val값을 지정해주는겁니다.

   let input = $('input:text').eq(0).val();
   console.log(input);

    console.log($('input:text').length);
    $('input:text').eq(1).val('우아개발');

2. function choice2() {

choice2()메서드에서는 라디오 버튼을 가져올텐데요. 실제 라디오 버튼의 개수는 3개로 등록이 되어있습니다. 그리고 아래의 코드(eq)의 역할에 따라 배열로 저장하게 됩니다.

function choice2() {
let text2 = $('input:radio.eq(0)').val();
console.log(text2);

그렇지만 위의 식을 사용하지 않고 싶다면, 아래와 같이 간결하게 작성해도 됩니다.

(똑같은 코드 결과를 불러오니 위와 아래의 코드 중 하나만 작성하시길 바랍니다

let text2 = $('input:radio:eq(0)).val();

2-1. 문서를 추가하기 전 알아야 할 사항

자바스크립트에서 innerHTML 역할을 했던 함수는 제이쿼리에서는 html() 메서드로 활용이 되고, innerText와 textContent는 태그 내부에 텍스트를,

$('#a').html('<h1>' + text2 + '</h1>');

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

jQuery 자식선택자와 자손선택자에 있는 태그를 적용하고 싶을때 (0)	2023.11.29
JQuery #02 CSS 적용의 기본 개념_선택된 요소들의 설정 (0)	2023.11.29
제이쿼리(J-Query) 다운로드 (0)	2023.11.29
JavaScript : 문서의 탐색 = DOM 탐색 (0)	2023.11.28
JavaScript : 아이디 중복확인 (indexOF의 등장) (0)	2023.11.27