'Java' 카테고리의 글 목록

datepicker는 급하게 기능을 구현해야 하거나 예쁜 디자인이 필요 없이 간단하게 달력창을 만들어서 사용할 때 적용하기 편합니다.

datepicker에 대해 가장 기본적인 설정부터 조금씩 살을 붙여 나가면서 사용 방법에 대해 알아봅니다.

1. 기본 기능 설정

우선 datepicker를 사용하기 위해서는 아래와 같은 jquery가 필요합니다.

그리고 HTML 태그를 이용하여 날짜를 입력 받기 위한 text input을 하나 만들어 줍니다.

<body>

</body>

그리고 javascript에서 input 입력과 datepicker을 기본적 값으로 설정하고 서로 연결 시켜주면 바로 달력창을 사용할 수 있습니다.

$(document).ready(function () {

$.datepicker.setDefaults();

$("#start_dt").datepicker();

});

</script>

웹 브라우저에서 실행하고 input 박스를 클릭하면 아래와 같은 가장 기본적인 달력창을 확인할 수 있고 날짜를 선택해서 input 창에 값을 입력 받습니다.

가장 기본적인 설정으로는 [월/일/년]의 형식으로 날짜가 입력됩니다.

03/21/2024

우리는 이렇게 사용하지 않으니 수정하려면 날짜 형식을 설정하는 값을 하나 추가합니다.

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

});

다시 실행해서 확인해 봅니다.

날짜가 설정한 형식으로 잘 입력이 되었습니다.

$.datepicker.setDefaults() 로 정의된 함수에 추가하는 설정 값은 공통으로 적용되는 설정입니다.

하나의 페이지에 여러 개의 달력 창을 만들어 사용하는 경우 모든 달력창에 동일한 설정 값이 적용됩니다.

만약 하나의 페이지에 여러 개의 달력창을 사용하는데 각각 또는 일부 달력창에는 다른 형태의 설정 값을 적용해서 사용하고 싶은 경우에는 배열 변수를 필요한 만큼 생성해서 서로 다른 설정을 정의한 후 필요한 달력 창에 적용해주면 됩니다.

예를 들어 var datepicker_set1 변수를 하나 생성하고 새로운 달력창(end_dt)을 추가한 후 설정을 반영해보도록 하겠습니다. 날짜 구분을 사선으로 구분하는 설정입니다.

var datepicker_set1 = {

dateFormat: 'yy/mm/dd',

}

$("#end_dt").datepicker(datepicker_set1);

input 박스를 클릭해서 날짜를 입력 받으면 바로 확인 가능합니다.

이런 식으로 처음 작업해본 start_dt와는 다른 결과 값을 얻기 위해 별도의 설정 값 적용하는 것이 가능 합니다.

물론 변수를 생성해서 사용하는 것이 혼란스럽다면 아래처럼 값을 직접 입력해도 됩니다.

$("#end_dt").datepicker({dateFormat : ‘yy/mm/dd’});

2. 한글 사용

이번에는 datepicker 달력창에 한글을 사용하는 방법입니다.

한글 추가라고 해서 특별한 건 없고 지금까지 작업한 소스에 아래 설정을 추가해서 월과 요일을 한글로 변경할 수 있습니다.

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

브라우저에서 어떻게 나오나 확인해 보겠습니다.

입력한 값이 그대로 노출되기 때문에 수정이 필요하면 바로 고치면 됩니다.

이번에는 년과 월을 선택하는 방법을 변경하는 설정을 추가해 보겠습니다.

지금까지는 좌우측 끝부분에 있는 버튼을 이용해서 월을 이동하는 방식이었는데 셀렉트 박스로 년과 월을 변경하는 방법입니다.

아래에 있는 설정을 추가합니다. 물론 전체 또는 필요한 달력창만 설정이 반영하도록 할 수 있습니다.

changeXX라는 설정은 년월을 변경하겠다는 것이고 추가로 월의 값을 한글로 수정할 수 있도록 한글 월을 적어주도록 합니다.

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

monthNamesShort은 셀렉트 박스에서 보여주는 월 명칭입니다. 생략하면 기본값으로 영문이 나오게 됩니다. 값은 입력한 한글이 그대로 노출되니 필요에 따라 수정하면 됩니다.

년 또는 월을 선택하기위해 방형버튼을 여러 번 누르지 않고도 바로 선택을 할 수 있습니다.

3. 버튼 추가

달력창을 보다 유용하게 사용하고 커스터마이징을 하는 방법으로 하단에 버튼을 추가해서 작업을 할 수 있습니다.

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

이 설정은 달력창 아래에 버튼을 추가하도록 하며 버튼의 기본 값은 영문으로 current와 close로 나오는데 이를 한글로 변경해서 볼 수 있습니다.

[이번달] 버튼은 다른 년 월을 선택했다가 다시 현재의 날짜로 돌아오려는 경우 사용하는 버튼입니다.

[닫기] 버튼은 그냥 달력창을 닫기만 하는 용도인데 내부적으로 함수를 가지고 있습니다. 만약 다른 기능을 추가하려면 아래와 같이 함수에 기능을 추가 해서 사용이 가능 합니다.

여기서는 선택한 값을 alert으로 나오도록 하는 단순 작업인데 필요에 따라 복잡하게 하면 되겠죠.

onClose: function(dateText, inst ) {

alert(dateText);

}

[닫기] 버튼을 클릭해 볼까요?

좀더 많은 내장된 함수와 기능들은 홈페이지를 방문하면 찾아볼 수 있습니다.

https://jqueryui.com/datepicker/

소스도 공개되어 있고 API documentation에 가면 다양한 기능 목록을 확인할 수 있습니다.

지금까지 작업한 전체 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var startDate = "";

var endDate ="";

$(document).ready(function () {

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

});

$("#start_dt").datepicker();

var datepicker_set1 = {

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

}

$("#end_dt").datepicker(datepicker_set1);

});

</script>

</head>

<body>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
HTML form tag에서 value text 가져오기 정리 (0)	2024.01.17
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29

JDBC Batch는 프로젝트와 별개로 작업하고 실행을 할 수 있어서 수정사항 발생시 바로바로 적용을 할 수 있다는 점이 운영하는 측에서는 편한 작업이 될 수 있습니다. 그러나 Batch job의 개수가 많아지거나 Table 사이즈가 크거나 작업의 우선 순위가 있어야 하는 경우 등의 상황에서는 다른 방법과 병행해서 사용하는게 개인적으로는 좋았던 것 같습니다.

오늘 기록해 놓으려는 소스는 SELECT 문을 사용해 key값의 데이터가 기존에 입력 되어있는지 확인하고 존재하면 UPDATE, 없으면 INSERT하는 단순 작업입니다.

1. DB 접속

먼저 DB 접속을 정의합니다.

Connection conn = null;
Class.forName("org.mariadb.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306", "db_id","db_passwd");
conn.setAutoCommit(false);

Driver는 사용하는 DB에 맞게 수정하면 됩니다.

2. Select 사용

기존에 입력된 데이터가 있는지 확인을 하기위해 함수를 하나 만들어서 결과를 리턴 받습니다.

int iCnt = getInsertCnt(conn, yesterday);

DB 접속 정보와 날짜를 파라미터로 데이터가 있는지 조회하는 쿼리입니다.

PreparedStatement pstmt = null;
int nCnt = 0;
ResultSet rs = null;

try {

           StringBuilder sql = new StringBuilder();
           sql.append("SELECT count(*) AS CNT FROM test.statistics WHERE INSERT_DT = ?");

           pstmt = conn.prepareStatement(sql.toString());
           pstmt.setString(1, yesterDay);

           rs = pstmt.executeQuery();
           while(rs.next()) {
               nCnt = rs.getInt(1);
               System.out.println("=== CNT : " + rs + "/" + nCnt);
           }
           rs.close();
           pstmt.close();
}

PreparedStatement : 쿼리를 높은 효율성으로 반복적으로 사용하기위한 저장 객체.

ResultSet : SQL 쿼리를 실행한 결과를 저장하는 객체.

nCnt : SELECT 결과의 개수를 저장하려고 만든 변수입니다.

쿼리 생성시 사용하는 변수를 물음표(?)로 표시하고 값을 대입해서 쿼리를 완성하게 됩니다.

변수가 변경되면 쿼리는 수정하지 않고 변수 값만 수정해주면 반복해서 쿼리를 사용할 수 있게됩니다.

물음표에 해당하는 값을 대입하는데 사용되는 메소드는 아래처럼 정수, 실수, 문자등을 구분해서 대입하게 됩니다.

public void setInt(int index, int value)
public void setString(int index, String value)
public void setFloat(int index, float value)
public void setDouble(int index, double value)

index는 물음표의 순번으로 첫번째 물음표는 1이 됩니다.

쿼리를 실행하는 메소드는 여러 종류가 있는데 여기서는 SELECT 결과를 ResultSet에 담아야 하기때문에 리턴 값이 ResultSet인 메소드 executeQuery()를 선택해서 사용했습니다.

좀더 자세한 PreparedStatement 관련 메소드는 아래 링크를 참조하면 도움이 됩니다.

https://docs.oracle.com/javase/8/docs/api/java/sql/Statement.html

JDBC는 업무 로직이 복잡하면 어려워지는거고 실제 사용법은 간단합니다. SELECT문 하나만으로 필요한 내용 설명은 거의 설명이 되는군요.

3. Insert / update

Insert문도 PreparedStatement 와 변수 대입을 위한 setString()을 사용합니다.

PreparedStatement pstmt = null;

                     try {

                    StringBuilder sql = new StringBuilder();
                    sql.append("INSERT INTO test.statistics (");
                    sql.append(" INSERT_DT");
                    sql.append(", VISIT_CNT");
                    sql.append(", PAGE_VIEW_CNT");
                    sql.append(", INST_DT");
                    sql.append(", INST_ID");
                    sql.append(") VALUES (");
                    sql.append(" ?");
                    sql.append(", (select 1 from dual)");
                    sql.append(", (select 2 from dual)");
                    sql.append(", date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", 'tester'");
                    sql.append(")");

                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);

Select에서는 쿼리 실행을 위해 pstmt.executeQuery()를 사용하고 Insert와 Update에서는 addBatch()와 executeBatch()을 사용했습니다.

addBatch()는 쿼리를 바로 실행하지 않고 쿼리 구문을 메모리에 올려두었다가, 실행 명령(executeBatch)이 있으면 한번에 DB쪽으로 쿼리를 보내어 처리를 하게 됩니다. 즉, 한 번의 SQL 수행으로 대량의 로우를 동시에 insert / update / delete를 진행할 수 있어 대용량 처리를 하는데 적합한 방법입니다.

여기서는 달랑 하나 처리했는데 동일한 작업을 진행하려면 loop 문을 이용해서 작업을 하면 됩니다.

간단히 설명이 끝났습니다.

아래 소스를 보면 좀더 파악이 쉬우리라 생각하며 소스를 첨부합니다.

package com.example.demo.test;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Properties;

public class Job {

           public static void main(String[] args) {

                     Connection conn = null;

               try {
                Class.forName("org.mariadb.jdbc.Driver");
                conn = DriverManager.getConnection("jdbc:mariadb://127.0.0.1:3306", "root","will99");
                conn.setAutoCommit(false);

                String yesterday = getYesterday();


                     int iCnt = getInsertCnt(conn, yesterday);

                     if(iCnt < 1) {
                                System.out.println("====== insert ==================");
                     insertData(conn, yesterday);
                     } else {
                                System.out.println("====== update ==================");
                         updateData(conn, yesterday);
                     }

                     conn.close();

               } catch (Exception e) {

                  e.printStackTrace();
               } finally {
                if(conn != null) {
                 try {
                      conn.close();
                 } catch (Exception e) {}
                }
               }
           }

           private static int getInsertCnt(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;
                     int nCnt = 0;
                     ResultSet rs = null;

                     try {

                                StringBuilder sql = new StringBuilder();
                       sql.append("SELECT count(*) AS CNT FROM test.statistics WHERE INSERT_DT = ?");

                       pstmt = conn.prepareStatement(sql.toString());
                         pstmt.setString(1, yesterDay);

                         rs = pstmt.executeQuery();
                         while(rs.next()) {
                              nCnt = rs.getInt(1);
                                    System.out.println("=== CNT : " + rs + "/" + nCnt);
                         }
                         rs.close();
                         pstmt.close();


                     } catch (Exception e) {

                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                       }
        }

                     return nCnt;
           }

           private static void insertData(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;

                     try {

                    StringBuilder sql = new StringBuilder();
                    sql.append("INSERT INTO test.statistics (");
                    sql.append(" INSERT_DT");
                    sql.append(", VISIT_CNT");
                    sql.append(", PAGE_VIEW_CNT");
                    sql.append(", INST_DT");
                    sql.append(", INST_ID");
                    sql.append(") VALUES (");
                    sql.append(" ?");
                    sql.append(", (select 1 from dual)");
                    sql.append(", (select 2 from dual)");
                    sql.append(", date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", 'tester'");
                    sql.append(")");

                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);

                    pstmt.addBatch();

                    pstmt.clearParameters();

                    pstmt.executeBatch();

                    pstmt.clearBatch();

                    conn.commit();

                    pstmt.close();

                 } catch (Exception e) {

                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                      }
                 }
           }

           private static void updateData(Connection conn, String yesterDay) {
                     PreparedStatement pstmt = null;

                     try {

                    StringBuilder sql = new StringBuilder();
                    sql.append("UPDATE test.statistics SET ");
                    sql.append("VISIT_CNT = (select 1 from dual)");
                    sql.append(", PAGE_VIEW_CNT = (select 1 from dual)");
                    sql.append(", UPDT_DT = date_format(now(), '%Y%m%d%H%i%s')");
                    sql.append(", UPDT_ID = 'tester'");
                    sql.append("where INSERT_DT = ?");

                    pstmt = conn.prepareStatement(sql.toString());
                    pstmt.setString(1, yesterDay);

                    pstmt.addBatch();

                    pstmt.clearParameters();

                    pstmt.executeBatch();

                    pstmt.clearBatch();

                    conn.commit();

                    pstmt.close();

                 } catch (Exception e) {

                    e.printStackTrace();
                 } finally {
                      if(pstmt != null) {
                                 try {
                                 pstmt.close();
                                 } catch (Exception e) {}
                      }
                 }
           }

           private static String getYesterday() {
                     Date today = new Date();
                     SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
                     String fmDate = sdf.format(today);
                     System.out.println("=== today : " + fmDate);

                     Calendar cal = Calendar.getInstance();
                     cal.setTime(today);

                     cal.add(Calendar.DATE, -1);
                     String fmDate2 = sdf.format(cal.getTime());
                     System.out.println("=== yesterday : " + fmDate2);

                     return fmDate2;
           }

}

- copy coding -

저작자표시 비영리 변경금지

'Java' 카테고리의 다른 글

JQuery 이용 datepicker 사용방법 순차적 설명 (0)	2024.03.14
HTML form tag 값 설정하기 정리 (0)	2024.01.28
HTML form tag에서 value text 가져오기 정리 (0)	2024.01.17
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29

from에서 자주 사용하는 태그들에 대한 값을 설정하는 기본적인 방법을 알아봅니다. 전에 설명한 form 태그에서 값을 읽어오는 방법과 연결된 내용입니다.

먼저 jQuery 버전에 따라 기능 사용법이 다를 수 있어 사용된 jQuery 버전 정보는 아라와 같습니다.

1. input tag 값 설정

- input tag 사용 방법

다음과 같이 input tag를 추가하고 id, class, name을 설정합니다.

- input tag 값 설정 방법

input tag에 설정한 id, class, name을 이용하여 input box에 아래와 같은 방법으로 값을 설정합니다.

//id 로 값 설정

$("#input_id").val("set input Value by id");

//class 로 값 설정

$(".input_class").val("set input Value by class");

//name으로 값 설정

$('input[name="input_name"]').val("set input Value by name");

2. textarea tag 값 설정

- textarea tag 사용 방법

다음과 같이 text tag를 추가하고 id, class, name을 설정합니다.

- textarea tag 값 설정 방법

textarea tag에 설정한 id, class, name을 이용하여 값을 아래와 같은 방법으로 설정할 수 있습니다.

input box와 동일한 방법 입니다.

//id 로 값 설정

$('#textarea_id').val("set textarea Value by id");

//class 로 값 설정

$('.textarea_class').val("set textarea Value by class");

//name으로 값 설정

$('textarea[name=textarea_name]').val("set textarea Value by name");

3. select tag 값 설정

- select tag 사용 방법

아래와 같이 select tag를 추가하고 id, class, name을 설정합니다.

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

- select에 value를 이용한 설정 방법

select tag에 설정한 id, class, name을 이용하여 value 값을 설정하는 방법으로 아래와 같이 선택이 되도록 합니다.

//id 로 값 설정

$('#sel_id').val("s2");

//class 로 값 설정

$('.sel_class').val("s3");

//name으로 값 설정

$("select[name='sel_name']").val("s1");

- select의 text를 이용한 설정 방법

- select tag에 사용한 text를 이용하여 선택이 되도록 설정할 수 있습니다.

//id 로 값 설정

$("#sel_id option:selected").text("select2");

//class 로 값 설정

$(".sel_class option:selected").text("select3");

//name으로 값 설정

$("select[name='sel_name'] option:selected").text("select1");

- 한가지 더 select 항목의 순서를 이용하여 선택을 설정하는 방법입니다.

//--Select by index 로 값 설정

document.getElementById("sel_id").options.selectedIndex = 1;

4. radio tag 값 설정

- radio tag 사용 방법

radio tag를 추가하고 id, class, name을 설정합니다.

<input type="radio" name="ra_name" class="ra_class1" id="ra_id1" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class2" id="ra_id2" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class3" id="ra_id3" value="radio3"> raddddd

- 설정한 id, name, class를 이용하여 radio button을 체크 하거나 체크 해제를 할 수 있습니다.

//id 로 값 설정

$('#ra_id1').attr('checked', true);

$('#ra_id1').attr('checked', false);

$("#ra_id1").prop("checked", true);

$("#ra_id1").prop("checked", false);

//class 로 값 설정

$('.ra_class2').attr('checked', true);

$('.ra_class2').attr('checked', false);

//name으로 값 설정

$('input:radio[name=ra_name][value=radio1]').attr('checked', true);

$('input:radio[name="ra_name"][value="radio2"]').prop('checked', true);

var radValue = "radio3";

$('input:radio[name="ra_name"][value='+radValue+']').prop('checked', true);

동일한 내용을 한쌍으로 만들었습니다.

true는 선택이고 false는 선택 해제입니다.

false를 먼저 주석 처리하고 하나씩 테스트 해보면 됩니다.

5. checkbox tag 값 설정

- checkbox tag 사용 방법

checkbox를 추가하고 id, class, name을 설정합니다.

<input type="checkbox" name="chk_name1" id="chk_id1" class="chk_class1" value="chk01">Check01

<input type="checkbox" name="chk_name2" id="chk_id2" class="chk_class2" value="chk02">Check02

<input type="checkbox" name="chk_name3" id="chk_id3" class="chk_class3" value="chk03">Check03

- checkbox 값 설정 방법

각 소스는 쌍으로 true, false로 체크와 체크 해제를 하게 작성되었습니다.

radio와 같은 방법으로 동일한 id, class등은 하나씩 번갈아 가며 주석처리해서 테스트하면 됩니다.

//id로 값 설정

$('#chk_id1').prop('checked', true);

$('#chk_id1').prop('checked', false);

document.getElementById('chk_id2').checked = true;

document.getElementById('chk_id2').checked = false;

//class 로 값 설정

$('.chk_class3').prop('checked', true);

$('.chk_class3').prop('checked', false);

//name으로 값 설정

$("input[name=chk_name3]").prop("checked",true);

$("input[name=chk_name3]").prop("checked",false);

대충 구현한 웹 모양입니다.

- 전체 소스

소스가 길어 가독성이 떨어지는 버튼관련 소스는 생략했습니다.

필요하면 이전 글에 있는 소스를 복사하거나 참조하여 테스트 하면 됩니다.

<head>

<title>form value</title>

</head>

<body>

<table>

<tr>

<td>Input </td>

</tr>

<tr>

<td>Textarea </td>

</tr>

<tr>

<td>Select</td>

<td>

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

</td>

</tr>

<tr>

<td>Radio</td>

<td>

<input type="radio" name="ra_name" class="ra_class1" id="ra_id1" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class2" id="ra_id2" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class3" id="ra_id3" value="radio3"> raddddd

</td>

</tr>

<tr>

<td>Checkbox</td>

<td>

<input type="checkbox" name="chk_name1" id="chk_id1" class="chk_class1" value="chk01">Check01

<input type="checkbox" name="chk_name2" id="chk_id2" class="chk_class2" value="chk02">Check02

<input type="checkbox" name="chk_name3" id="chk_id3" class="chk_class3" value="chk03">Check03

</td>

</tr>

<tr>

</tr>

<tr>

<td><button onclick="btnClick();"> button </button></td>

</tr>

$( document ).ready(function() {

//--Input

//id 로 값 설정

$("#input_id").val("set input Value by id");

//class 로 값 설정

$(".input_class").val("set input Value by class");

//name으로 값 설정

$('input[name="input_name"]').val("set input Value by name");

//--Textarea

//id 로 값 설정

$('#textarea_id').val("set textarea Value by id");

//class 로 값 설정

$('.textarea_class').val("set textarea Value by class");

//name으로 값 설정

$('textarea[name=textarea_name]').val("set textarea Value by name");

//--Select by value

//id 로 값 설정

$('#sel_id').val("s2");

//class 로 값 설정

$('.sel_class').val("s3");

//name으로 값 설정

$("select[name='sel_name']").val("s1");

//--Select by text

//id 로 값 설정

$("#sel_id option:selected").text("select2");

//class 로 값 설정

$(".sel_class option:selected").text("select3");

//name으로 값 설정

$("select[name='sel_name'] option:selected").text("select1");

//--Select by index 로 값 설정

document.getElementById("sel_id").options.selectedIndex = 1;

//--Radio

//id 로 값 설정

$('#ra_id1').attr('checked', true);

$('#ra_id1').attr('checked', false);

$("#ra_id1").prop("checked", true);

$("#ra_id1").prop("checked", false);

//class 로 값 설정

$('.ra_class2').attr('checked', true);

$('.ra_class2').attr('checked', false);

//name으로 값 설정

$('input:radio[name=ra_name][value=radio1]').attr('checked', true);

$('input:radio[name="ra_name"][value="radio2"]').prop('checked', true);

var radValue = "radio3";

$('input:radio[name="ra_name"][value='+radValue+']').prop('checked', true);

//--Checkbox

//id로 값 설정

$('#chk_id1').prop('checked', true);

$('#chk_id1').prop('checked', false);

document.getElementById('chk_id2').checked = true;

// document.getElementById('chk_id2').checked = false;

//class 로 값 설정

$('.chk_class3').prop('checked', true);

// $('.chk_class3').prop('checked', false);

//name으로 값 설정

$("input[name=chk_name3]").prop("checked",true);

// $("input[name=chk_name3]").prop("checked",false);

});

</script>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지

'Java' 카테고리의 다른 글

JQuery 이용 datepicker 사용방법 순차적 설명 (0)	2024.03.14
Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag에서 value text 가져오기 정리 (0)	2024.01.17
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29

이번 프로젝트는 화면을 JSP로 구현하는 사이트에서 일을 하게 되었습니다. form:form tag도 있지만 예전 방식을 사용하는 곳이라 값을 가져오는 방법에 대해서 정리를 해보았습니다. tag들이 여러 개지만 가장 많이 사용하는 것을 기존으로 정리해봅니다.

value 또는 text를 가져오는 방법과 id, class, name으로 가져오는 방법을 정리했습니다.

설명은 필요 없을 듯 하여 그냥 소스와 결과만 기록 합니다.

예제로 사용한 form 태그의 모습입니다.

1. input tag

- input 사용 방법

- input value 가져오기

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

- input 결과

input val : ss12/ss12/ss12

2. textarea

- textarea 사용 방법

- textarea value 가져오기

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

- textarea 결과

textarea val : text0

area0/text0

area0

3. select

- select 사용 방법

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

- select value 가져오기

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

- select text 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

Select value : s2/s2/s2

Select text : select2/select2/select2

4. radio

- radio 사용 방법

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

- radio value 가져오기

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

- radio 결과

Radio value : radio2/radio2/radio2

5. checkbox

- checkbox 사용 방법

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

- checkbox value 가져오기

두가지 방법

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

- checkbox 결과

Checkbox value : chk01, chk03

Checkbox value : chk01,chk03

web 화면과 console 결과화면 입니다.

전체 소스

<head>

<title>form value</title>

</head>

<body>

<table>

<tr>

<td>Input </td>

</tr>

<tr>

<td>Textarea </td>

</tr>

<tr>

<td>Select</td>

<td>

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

</td>

</tr>

<tr>

<td>Radio</td>

<td>

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

</td>

</tr>

<tr>

<td>Checkbox</td>

<td>

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

</td>

</tr>

<tr>

</tr>

<tr>

<td><button onclick="btnClick();"> button </button></td>

</tr>

function btnClick() {

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

console.log("input val : " + inputId +"/"+ inputClass +"/"+ inputName);

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

console.log("textarea val : " + textareaId +"/"+ textareaClass +"/"+ textareaName);

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

console.log("Select value : " + selectId +"/"+ selectClass +"/"+ selectName);

//text값 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

console.log("Select text : " + selTxt +"/"+ selIdTxt +"/"+ selNameTxt);

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

console.log("Radio value : " + radioId +"/"+ radioClass +"/"+ radioName);

// checkbox

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

console.log("Checkbox value : " + value_list);

}

</script>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29
삼항 연산자, 조건 연산자, 물음표(?) 조건문 정리 (0)	2022.04.27

Copy Coding

Java

JQuery 이용 datepicker 사용방법 순차적 설명

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample

'Java' 카테고리의 다른 글

HTML form tag 값 설정하기 정리

'Java' 카테고리의 다른 글

HTML form tag에서 value text 가져오기 정리

1. input tag

2. textarea

3. select

4. radio

5. checkbox

'Java' 카테고리의 다른 글

+ Recent posts

티스토리툴바