📕🐘 도로락 - 코끼리를 냉장고에 넣는 방법

# SUBMIT (2)

HTML&CSS 2019. 11. 28. 22:42

[HTML] form 태그에서 button 태그 사용시 submit 과 함께 새로고침 되는것 막는 방법

form 태그에서 button 태그 사용시 submit 과 함께 새로고침 되는것 막는 방법아래 코드를 보면 태그가 있고 form 안에 이 있습니다. 그리고 이 버튼에는 onclick 이벤트를 처리하는 핸들러 함수로 printHello()가 지정되어 있어 input 창에 값을 입력하고 버튼을 클릭하면 hello! xx가 출력될것을 의도하였습니다. 이름 : 버튼그러나 버튼을 누르면 입력한 이름이 콘솔에 출력되는것아 아닌 form의 내용이 submit (전송) 이벤트가 발생하면서 새로고침이 되어버립니다.원인은 단순한데 태그 안에서의 태그는 기본적으로 클릭시 submit 이벤트를 실행시키도록 되어있기 때문입니다. 즉 과 같은 동작을 하게됩니다.해결 방법은 간단한데 button의 type 속성을..

JavaScript 2019. 7. 27. 16:27

[JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기

자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기기본적으로 태그를 사용하여 입력한 데이터를 웹서버로 전송할때 태그의 type="submit"을 통해 전송버튼을 만들어 사용합니다.input submit의 경우 form 안에 있는 모든 input의 value를 전송하게 되는데, 이경우 각 input에 값이 입력되었는지 등의 여부를 검증(validation)할 수 없습니다.따라서 이 경우 으로 버튼을 하나 만들고 onClick 이벤트를 직접 핸들링하여, 버튼을 클릭했을 때 각 입력값을 검증한 후 수동으로 submit 처리 해주어야 합니다.예제다음은 form의 입력값을 검증하고 수동으로 submit 처리하는 예제입니다. git링크 ..

티스토리툴바