반응형 자바스크립트 반응형 20 [JQuery] 핸드폰번호 정규식 하이픈 추가 방법 데이터베이스에서 뷰로 나타낼때 데이터베이스에 저장되어 있는 휴대번호 값이 '01068795421' 이라면 '010-6879-5421' 로 하이픈을 넣어 화면에 보여줄 계획입니다. 더블어, 전화번호 정규식처럼 비슷하게 사용되는 여러가지 정규식을 정리해보았으니 참조해주세요~ (비밀번호, 이메일, 일반전화번호) 데이터베이스 값 : 01068795421 정규식을 통한 하이픈 추가 값 : 010-6879-5421 HTML 여기서는 일반적인테이블 형태입니다. 주목할 점은 td에 id값을 넣어주어 제이쿼리 값이 들어갈 수 있도록 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 연락처 cs JQuery 그리고 test변수에 디비값을 넣어줍니다. testDate함수에서는 replace를 사용하여 test변수 뒤.. 2020. 12. 30. [Jquery]체크박스 전체선택 및 전체해제 또는 특정선택 제어기능 안녕하세요. 오늘은 체크박스 관련된 제이쿼리를 소개하려합니다. 아래 사진과 같이 전체를 선택하면 전부 선택하는 기능은 화면상으로 복잡할 여지가 있습니다. 해서, 복수로 선택하되, 전체를 눌렀을 경우 모두 해제되고 ‘전체’만 선택될 수 있도록 하는 제이쿼리를 정리해보려 합니다. 번외로 특정선택을 할 수 있는 제어기능도 정리하려 합니다. Jsp 1 2 3 4 5 전체 테스트1 테스트2 테스트3 테스트4 cs 우선 jsp에서는 input type에 체크박스를 넣어 체크박스 형태를 만들어줍니다. 문을 통해서 특정 값일 경우 checked를 할 수 있도록 합니다. Onclick 함수 기능은 아래에서 별도로 소개하겠습니다. Jquery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18.. 2020. 12. 22. [HTML&JQUERY] 이메일 형식 입력하는 방법 & 유효성 검사 (영상 有) 안녕하세요. HTML 과 JQUERY를 이용하여 이메일 형식만 입력할 수 있는 방법과 이에 대한 유효성 검사하는 방법에 대해 알아보겠습니다. 흔히들 많이 사용하는데 할때마다 잃어버려서 따로 정리해보았습니다. 오직 이메일 형식의 숫자 및 영문만 입력됩니다. 아래는 구현된 이메일형식의 영상이며, 이메일형식이 틀리게 입력할 경우 경고 메세지가 나오게 됩니다. HTML INPUT 두개를 만들어 아이디와 도메인이 입력될 수 있도록하고 select박스를 이용하여 도메인 선택란을 만들어줍니다. 그리고 onclick을 이용해서 선택한 도메인이 도메인 input에 입력될 수 있도록 함수를 만들어줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 이메일 * @ -선택- naver.com g.. 2020. 12. 1. [Jquery]특정값에 대한 SelectBox 선택불가 기능 구현 안녕하세요. 오늘은 특정 값이 0일경우 select박스를 선택할 수 없도록 해보려합니다. 우선 위의 기능을 구현하기 위해 제이쿼리에서 필요한 문법을 정리해보았습니다. disabled : input태그가 비활성화됩니다. .pop() : 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나, 속성을 추가합니다.(javascript속성) .not() : 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. =* : 속성 값에 문자열이 포함 되어 있는 경우를 찾습니다. 아래 그림을 보면 툭정값이 0이 일때 jquery에서 disabled를 사용하여 선택이 안되도록 만들었습니다. 테스트 1의 값 = 1 테스트 2의 값 = 1 테스트 3의 값 = 0 HTML 각각의 select박스에 id를 부여하고 값을 넣어.. 2020. 12. 1. 게시판 페이지 개수별 검색(selectbox 검색) 페이지에 10개/20개/30개씩 보이도록 설정하는 기능을 간단히 이야기해보겠습니다. 전체 소스를 올리면 너무 양이 많아져서 페이징 기능이 완료되었다는 가정하에 작성하였습니다. 페이징을 완료하였다면 개수별 검색 기능은 jsp에서만 간단히 작성하면 구현할 수 있습니다! 아래는 구현 화면입니다. JSP Onchange 함수를 통해서 자바스크립트로 보냅니다. option값은 c:if문을 사용하여 각각의 값일 경우 선택값이 변하지 않도록 sleected값을 설정합니다. 1 2 3 4 5 6 7 10개씩 보기 20개씩 보기 30개씩 보기 Colored by Color Scripter cs Script Idx 값과 select id에 선언한 값을 각각 변수에 담습니다. 그리고 조건으로 만약에 특정 페이지 값을 선택할.. 2020. 10. 2. 라디오 버튼에 따라 입력칸 보이기/숨기기 특정 라디오 버튼을 눌렀을 때, div값이 보이고 숨겨지는 것을 알아보겠습니다. 우선 저는 div값이 숨겨져 있다가, ‘기타’라는 라디오버튼을 누르면 div값이 나타나는 기능으로 하도록 하겠습니다. 결과화면입니다. 적용 전 적용 후 JSP 특정 버튼인 기타 부분의 ID를 다른 라디오 버튼 ID와 다르게 설정합니다. 그리고 DIV ID 값을 지정해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 신청 경로 온라인 최초 신청 방문 사후 관리 유관기관 추천 지인소개 기타 Colored by Color Scripter cs JQUERY 라디오에서 ID값이 기타부분인 것을 클릭할 경우 체크값이 있으면 Di.. 2020. 10. 2. 체크박스(checkbox) 클릭 시, 활성화/비활성화 방법 (2021년 4월 11일에 내용을 수정하였습니다.) 등록페이지에서 유형에 따라 입력 가능/불가능 항목들이 존재합니다. 특정 체크박스 값에 따라 비활성화되고 다시 활성화되는 소스 코드를 정리해보겠습니다. 우선 결과 화면입니다. 다른곳을 클릭할 시의 활성화 특정 체크박스를 클릭시 비활성화 JSP 일반 체크박스 값들을 여러 개 설정해주었는데 여기서 특정 체크박스만 반응하도록 설정하기 위해서 예비창업자란 항목의 id값을 다른 값들과 달리 주었습니다. 그리고 해당되는 부분들에 대해 클래스에 applicable이란 놈을 넣어줍니다. 그래서 이녀석들을 일괄적으로 적용시키는거죠. 아이디값은 문서상 한개만 사용되는 규칙이 있기때문에 중복해서 만들어 주기가 곤란합니다. 그래서 중복 가능한 클래스를 여러개 만드는거죠! 1 .. 2020. 10. 2. [Jquery] 라디오 버튼 동의/미동의 기능 구현 (영상 有) 사이트를 만들다 보면 동의서에 대한 동의/미동의 기능을 구현할 경우가 종종있습니다. 제이쿼리를 통해 제가 알고 있는 두가지 방법을 공유해드리니 도움되셨으면 좋겠습니다. 첫번째는 한개 항목의 라디오 버튼 / 두번째는 다중 항목의 라디오 버튼의 정리 내용 입니다. 전체동의버튼 기능도 추가하였습니다. 첫번째! 한개의 항목에 대한 라디오버튼 처리입니다. 아래 화면과 같이 하나의 라디오 버튼을 가지고 동의/미동의 기능 구현 입니다. 요약하자면 함수를 부르는 onclick 값에 obj값을 넣어서 obj값이 Y 또는 N 일때 if문을 통해 값을 구하는 것입니다. Y일 경우 check가 되어 있다면 form문의 action 주소로 넘어갑니다. 최종 완료 화면입니다. JSP 1 2 3 4 5 6 7 8 9 10 내용내용.. 2020. 10. 2. 여러 개의 Select 값을 하나의 컬럼으로 합치는 방법 여러 개의 Select 값을 하나의 컬럼으로 합치는 일이 간혹 생깁니다. 예를 들어 날짜가 있겠네요. 년월일시분초 이 각각의 값들을 하나의 컬럼으로 합치는 방법을 정리해보겠습니다. 요약하자면 select부분에서 id값으로 제이쿼리에서 읽을 수 있도록 설정합니다. submit으로 제이쿼리로 넘겨주면 var을 통해 만든 변수에 id값을 넣어주고, 값을 넣을 컬럼(prom_rec_sdate)에 select id 항목들을 집어 넣습니다. 그리고 가장 중요한 부분은 값이 적용될 수 있도록 form태그 안에 hidden 값으로 값을 넣을 컬럼(prom_rec_sdate)을 넣어주면 끝입니다! 글은 아무리 잘 써도 모르는 부분에 있어서는 이해가 잘 안되는거같아요 ㅎㅎ 코드를 통해 확인해 보겠습니다. JSP selec.. 2020. 9. 29. 이전 1 2 3 다음
