Copy Coding

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

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

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

1. input tag 값 설정

- input tag 사용 방법

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

<input type="text" id="input_id" class="input_class" name="input_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 id="textarea_id" class="textarea_class" name="textarea_name"></textarea>

- 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을 설정합니다.

            <select id="sel_id" class="sel_class" name="sel_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);

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

- 전체 소스

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

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

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>form value</title>

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

</head>

<body>

<table>

    <tr>

        <td>Input </td>

        <td><input type="text" id="input_id" class="input_class" name="input_name"></td>

    </tr>

    <tr>

        <td>Textarea </td>

        <td><textarea id="textarea_id" class="textarea_class" name="textarea_name"></textarea></td>

    </tr>

    <tr>

        <td>Select</td>

        <td>

            <select id="sel_id" class="sel_class" name="sel_name">

              <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>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

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

    </tr>

<script>

$( 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 -

화면에 텍스트를 출력 하는데 일부 글자를 강조하기 위해 색을 사용해야 하는데 필요에 따라 텍스트가 변경되는 경우 이미지로 하기도 어려운 조건인 경우 html tag를 이용하여 쉽게 해결할 수 있습니다.

사용법도 그냥 html tag를 그대로 사용할 수 있기 때문에 전혀 어렵지도 않습니다.  먼저 text를 출력할 TextView와 Button을 하나씩 만들어 주고

java 파일에서 Html.formHtml()만 사용하면 됩니다.

이렇게 일반 텍스트와 버튼에도 쉽게 적용이 가능 합니다.

- copy coding -

html tag를 데이터베이스에 저장하기위해 특수문자를 변환해야 하는 경우가 발생합니다.  DB에 저장을 했으니 웹 페이지에 뿌릴때는 반대의 작업을 해야 하는데 이때 Spring을 사용한다면 특별히 라이브러리를 설치하지 않고도 변환이 가능합니다.

간단한 예제를 살펴 보면

이렇게 "<HTML> <table><tr><div> &” HTML 문서가 있는 경우 htmlEscape 와 htmlUnescape 함수를 이용하면

이렇게 쉽게 변환이 가능 합니다.

만약 일반적인 특수 기호나 숫자, 알파벳을 변환하려고 하면 어떻게 될까요?

아쉽게도 아무런 변화가 없습니다.

그럼 escape 문자를 변환하면

잘 변환이 됩니다.

그런데 굳이 일반 문자나 숫자를 변환할 일은 많지 않을것 같군요.

- copy coding -

eclipse jsp 미리보기

eclipse에서 JSP와 HTML 파일 편집 작업을 하려는 경우 기본적으로 상단에 미리보기가 나타납니다.

JSP 미리보기 숨기기

그런데 미리보기는 성능에도 문제가 되고 소스를 보기에도 불편하여 편집 작업을 진행 하기에 불편한 점이 있습니다.  간단한 설정으로 미리보기 창이 나타나지 않도록 할 수 있으며 반대로 하면 미리보기가 나타나도록 할 수 도 있습니다.

상단 메뉴에서 Window > Preferences를 선택 합니다.

Preferences 창 좌측 메뉴에서 General > Editors > File Associations를 선택 합니다.  

그리고 우측에 있는 파일 확장자에서 *.jsp를 선택 하고 하단의 Associated editors에서 그림과 같이 JSP Editor (locked by ‘JSP’ content type)...를 선택 합니다.

Default 버튼 클릭 하면 상단으로 이동을 하며 기본 값이 변경 됩니다.  Apply and Close 버튼 클릭 하여 선택 값을 반영 합니다. 

선택 값이 바로 반영되지 않고 열려있는 jsp 파일을 닫고 다시 열어보면 상단의 미리보기 화면이 사라져 있습니다.

HTML 미리보기 숨기기

*.htm, *.html 파일의 미리보기도 동일한 방법으로 작업을 진행 합니다.

*.htm과 *.html을 각각 선택 하고 HTML Editor를 선택한 상태에서 Default 버튼을 클릭 하면 편집 모드가 우선으로 반영이 됩니다.