form onsubmit

onsubmit은 조건에 따라 form을 서버에 전송할 수 있게 한다.

<form class="form-register" method="post" action="/user/join" onsubmit="return signUp();" modelAttribute="userDto">
	<button id="target" class="btn btn-lg btn-primary btn-block" type="submit">가입하기</button>
</form>

signUp 메소드 호출 결과가 true일 때, post 방식으로 /user/join에 전송

버튼의 type은 생략해도 됨(defualt가 submit)

 

function signUp(){
        var nameMsg=document.getElementById("name_msg").innerText;
        var id=document.getElementById("id_msg").innerText;
        var password=document.getElementById("pass_msg").innerText;
        var email=document.getElementById("check_email").innerText;
        var phone=document.getElementById("check_phone").innerText;

        if(nameMsg == "" && id == "사용할 수 있는 아이디입니다." && password == "비밀번호 일치" && email == "" && phone == ""){
            alert('가입 성공');
            return true;
        }else{
            alert('다시 확인해 보세요.');
            return false;
        }
    }

각 input 하단의 메시지 값을 이용했다.

div 태그의 값은 주로 innerText 또는 innerHTML을 사용해 가져온다.

return false면 서버에 form을 전송하지 않고 머문다.

 

 

참고 👇

https://www.codingfactory.net/12175

JavaScript / Event / onsubmit / 폼 전송하기 전에 작업 수행하게 하는 이벤트

 

https://stackoverflow.com/questions/10694661/document-getelementbyid-value-return-undefined-in-chrome/10694690

document.getElementById().value return undefined in chrome

 

https://tyrionlife.tistory.com/200

[JS] DOM : form 태그 응용, 조건에 따른 submit 활용(onsubmit)