[JSP 9일차]회원가입/prop/show/hide/focus/select

prop

 

# prop()로 버튼의 disabled 상태값 확인하기, return 값으로 boolean 을 반환한다, 따라서 조건문에 사용하면 된다.

- true: 사용하고 있다면 true를 반환한다.

- false: 사용안하고 있다면 false를 반환한다.

$("#[my_id]").prop("disabled") 

 

# attr()로 버튼의 disabled 사용여부 바꾸기

- true: 사용함 상태로 바꾸기, 속성값 disabled="disabled"  추가 된다.

- false: 사용안함 상태로 바꾸기, 속성값 disabled="disabled"  삭제 된다.

$("#[my_id]").prop("disabled", true);

$("#[my_id]").prop ("disabled", false);

 

성명 입력 후 공백이면 오류 show 자동으로 나머지 input박스들 비활성화
 옳게되면 오류 hide /자동으로 성명에 focus 

 

memberRegister.jsp

 

$(document).ready(function(){
        
        $("span.error").hide();
        $("input#name").focus();
        
        $("input#name").blur( (e)=>{
            
            const $target = $(e.target);
            
            const name = $target.val().trim();
            if(name == "") {
                // 입력하지 않거나 공백만 입력했을 경우 
                $("table#tblMemberRegister :input").prop("disabled", true);
                $target.prop("disabled", false);
                
            //    $target.next().show();
            //  또는
                $target.parent().find("span.error").show();
                
                $target.focus();
            }
            else {
                // 공백이 아닌 글자를 입력했을 경우
                $("table#tblMemberRegister :input").prop("disabled", false);
                
            //    $target.next().hide();
            //  또는
                $target.parent().find("span.error").hide();
            }
            
        } ); // 아이디가 name 인 것은 포커스를 잃어버렸을 경우(blur) 이벤트를 처리해주는 것이다. 

 

select 표현하기 

 

<뷰단 memberRegister.jsp >

 

<tr>
            <td style="width: 20%; font-weight: bold;">생년월일</td>
            <td style="width: 80%; text-align: left;">
               <input type="number" id="birthyyyy" name="birthyyyy" min="1950" max="2050" step="1" value="1995" style="width: 80px;" required />
               
               <select id="birthmm" name="birthmm" style="margin-left: 2%; width: 60px; padding: 8px;">
                <%--     
                    <option value ="01">01</option>
                    <option value ="02">02</option>
                    <option value ="03">03</option>
                    <option value ="04">04</option>
                    <option value ="05">05</option>
                    <option value ="06">06</option>
                    <option value ="07">07</option>
                    <option value ="08">08</option>
                    <option value ="09">09</option>
                    <option value ="10">10</option>
                    <option value ="11">11</option>
                    <option value ="12">12</option>
                 --%>    
                </select> 
               
               <select id="birthdd" name="birthdd" style="margin-left: 2%; width: 60px; padding: 8px;">
                <%--     
                    <option value ="01">01</option>
                    <option value ="02">02</option>
                    <option value ="03">03</option>
                    <option value ="04">04</option>
                    <option value ="05">05</option>
                    <option value ="06">06</option>
                    <option value ="07">07</option>
                    <option value ="08">08</option>
                    <option value ="09">09</option>
                    <option value ="10">10</option>
                    <option value ="11">11</option>
                    <option value ="12">12</option>
                    <option value ="13">13</option>
                    <option value ="14">14</option>
                    <option value ="15">15</option>
                    <option value ="16">16</option>
                    <option value ="17">17</option>
                    <option value ="18">18</option>
                    <option value ="19">19</option>
                    <option value ="20">20</option>
                    <option value ="21">21</option>
                    <option value ="22">22</option>
                    <option value ="23">23</option>
                    <option value ="24">24</option>
                    <option value ="25">25</option>
                    <option value ="26">26</option>
                    <option value ="27">27</option>
                    <option value ="28">28</option>
                    <option value ="29">29</option>
                    <option value ="30">30</option>
                    <option value ="31">31</option>
                 --%>    
                </select> 
            </td>
        </tr>

 

<javascript 부분>

 

 

let mm_html = "";
        for(var i=1; i<=12; i++) {
            if(i<10) {
                mm_html += "<option>0"+i+"</option>";
            }
            else {
                mm_html += "<option>"+i+"</option>";
            }
        }
        
        $("select#birthmm").html(mm_html);
        
        
        let dd_html = "";
        for(var i=1; i<=31; i++) {
            if(i<10) {
                dd_html += "<option>0"+i+"</option>";
            }
            else {
                dd_html += "<option>"+i+"</option>";
            }
        }
        
        $("select#birthdd").html(dd_html);