인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

kim1234123님의 프로필 이미지
kim1234123

작성한 질문수

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

자바스크립트 form

작성

·

291

0

타임리프 사용 시,

자바스크립트로 form넘기는거 안되나요?

답변 1

0

안녕하세요. jacomyou님, 공식 서포터즈 David입니다.

가능합니다. 타임리프 템플릿 내에서 자바스크립트를 작성하시면 됩니다.

감사합니다.

kim1234123님의 프로필 이미지
kim1234123
질문자

click이벤트도 안되고 있습니다.

스크립트를 body태그에 넣었는데 왜 안되나요?

 

오류가 발생한 상황에 대해 질문 하실 때 작성하신 코드와 오류 메시지를 함께 첨부해 주시면 더욱 자세히 답변해 드릴 수 있습니다.

kim1234123님의 프로필 이미지
kim1234123
질문자

imageimage

오류가 아닌 인식을 못하고 있습니다.

 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .field-error {
            border-color: #dc3545;
            color: #dc3545;
        }
    </style>

    <script>
        function click(f){
            alert("클릭")
        }
    </script>

</head>

<body>
<form method="post" th:object="${buyer}">
    <table border="1px" align="center">
        <!--    th:action="@{|/buyerMyPage/buyerChangeSuccess|}"-->
        <tr>
            <th colspan="4">필수사항</th>
        </tr>
        <tr>
            <th>아이디</th>
            <td colspan="4">
                <input type="text" th:value="${buyer.getBuyerID()}" th:field="*{buyerID}" readonly
                       style="background: #6c757d"/>
            </td>
        </tr>
        <tr>
            <th>닉네임</th>
            <td colspan="4">
                <input colspan="4" th:errorclass="field-error" type="text" th:value="${buyer.getNickname()}"
                       th:field="*{nickname}"/>
                <span th:errors="*{nickname}">닉네임 입력</span>
            </td>

        </tr>
        <tr>
            <th>휴대번호</th>
            <td colspan="4">
                <input th:errorclass="field-error" type="text" id="phoneNm0" th:field="*{phoneNm0}" maxlength='3'/> -
                <input th:errorclass="field-error" type="text" id="phoneNm1" th:field="*{phoneNm1}" maxlength='4'/> -
                <input th:errorclass="field-error" type="text" id="phoneNm2" th:field="*{phoneNm2}" maxlength='4'/>

            </td>

        </tr>
        <tr>
            <th>주소</th>
            <td colspan="4">
                <input th:errorclass="field-error" type="text" th:value="${buyer.getAddress()}" th:field="*{address}"
                       size="60">
                <div th:errors="*{address}">주소 입력</div>

            </td>
        </tr>

        <tr>
            <th colspan="4">선택사항</th>
        </tr>

        <tr>
            <th>성별</th>
            <td>
                <input type="radio" id="f" th:value="F" th:field="*{gender}" th:checked="${buyer.gender eq 'F'}">
                <label for="f">여자</label>
            </td>
            <td colspan="4">
                <input type="radio" id="m" th:value="M" th:field="*{gender}" th:checked="${buyer.gender eq 'M'}">
                <label for="m">남자</label>
            </td>
        </tr>

        <tr>
            <th>키</th>
            <td><input type="text" th:value="${buyer.getLength()}" th:field="*{length}"></td>
            <th>몸무게</th>
            <td><input type="text" th:value="${buyer.getWeight()}" th:field="*{weight}"></td>
        </tr>
        <tr>
            <td colspan="4" align="center">
                <input type="submit" id="updateBtn" onclick="click(this.form)" value="수정">
                <input type="reset" value="초기화"/>
            </td>
        </tr>

    </table>
</form>

</body>


</html>

아래 가이드를 따라 프로젝트를 공유해 주세요.

---

전체 프로젝트를 압축해서 구글 드라이브로 공유해서 링크를 남겨주세요.
구글 드라이브 업로드 방법은 다음을 참고해주세요.


구글 드라이브 업로드 방법
링크

주의: 업로드시 권한 문제 꼭 확인해주세요

추가로 다음 내용도 코멘트 부탁드립니다.

1. 실행 방법을 알려주세요.
2. 어떻게 문제를 확인할 수 있는지 자세한 설명을 남겨주세요.

감사합니다.

kim1234123님의 프로필 이미지
kim1234123
질문자

해결되었습니다

 

kim1234123님의 프로필 이미지
kim1234123

작성한 질문수

질문하기