Form에 입력된 값을 가져오기

위와 같은 Form이 4개가 있고 이 Form에 들어간 내용을 불러와야 한다.

참고로 저 한 개의 폼은 아래와 같이 작성되어 있다.

<div class="form-floating mb-3">
	<input type="email" class="form-control" id="image" placeholder="앨범 이미지">
	<label for="floatingInput">앨범 이미지</label>
</div>

첫번째로 해야 할 일, input 태그에 id를 부여한다. (위에선 image)

사용자가 폼에 입력한 값을 불러오려면 .val()이라는 함수를 사용한다.

function makeCard() {
	let image = $('#image').val();
}

 

이렇게 불러온 값을 새로운 앨범 카드로 만들어야 한다.

카드를 만드는 HTML 태그를 전체 복사한다. 그 다음 별도의 함수를 만들어 `` 백틱 안에 넣는다.

let temp_html = `
           <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>
`

위의 코드는 temp_html이라는 함수를 만들고, 그 함수를 실행하면 `` 백틱 안의 HTML 태그가 작성되도록 하는 내용이다.

위를 보면 원래 앨범 제목 등으로 적혀있던 내용을 ${함수값}으로 지정하여 내용이 대체되도록 하였다.

 

이렇게 만들어진 태그를 특정 컨테이너나 위치에 넣고 싶다면 그곳에 ID를 부여하고 아래와 같이

$('#아이디지목').append(temp_html);

append 함수를 사용하면 val에서 가져온 값이 해당 ID에 하나씩 붙는다.

 

 

 

출처 : 스파르타코딩클럽