jQuery

input:hidden[name=SA1] 이란? 히든 속성 및에 이름이 SA1인 태그

쿠카이든 2022. 12. 29. 18:02
728x90
input:hidden[name=SA1]

실무를 하다가 아래와 같은 코드를 발견했다.

$('form[name=main_form2] input:hidden[name=SA1]').removeAttr('value');
$('form[name=main_form2] input:hidden[name=SA1Name1]').removeAttr('value');

조금 생소해서 예제를 찾아서 아래에 정리하였다.

<!DOCTYPE html>
<html>
<head>

<script>

function info_form(){
   str  = " name   : " + $("form").attr('name') + "<br>" ;
   str += " action : " + $("form").attr('action') + "<br>" ;
   str += " target : " + $("form").attr('target') + "<br>" ;
   str += " method : " + $("form").attr('method') + "<br>" ;
   str += " encoding  : " + $("form").attr('encoding') + "<br>" ;
   str += " length  : " + $("form").val().length + "<br>" ;
   str += " 첫번째 요소 value  : " + $("form input[name=name]").val() + "<br>" ;
   str += " 첫번째 요소 name  : " + $("form input[name=name]") + "<br>" ;
   str += " 첫번째 form의 첫번째 요소 name  : " + document.forms[0].elements[0].name + "<br>" ;
   str += " 첫번째 form의 첫번째 요소 value  : " + document.forms[0].elements[0].value + "<br>" ;
   str += " 첫번째 form의 두번째 요소 name  : " + $("form input[name=telNO]") + "<br>" ;
   str += " 첫번째 form의 두번째 요소 value  : " + $("form input[name=telNO]").val() + "<br>" ;
   str += " 첫번째 form의 세번째 요소 name  : " + $("form input[name=address]") + "<br>" ;
   str += " 첫번째 form의 세번째 요소 value  : " + $("form input[name=address]").val() + "<br>" ;
   document.write(str);

}


$(document).ready(function(){
    $("#info_form").click(function(){
        info_form();

        // $("form :input").each(function(){
           // alert($(this).val());
        // });

    });
    
    $("form").submit(function(){
        var name = $("input[name=name]").val();
        var telNO = $("input[name=telNO]").val();
        var address = $("input[name=address]").val();
        if(name ==""){
            alert('이름을 입력하세요');
            $("input[name=name]").focus();
            return false;
        }
        if(telNO ==""){
            alert('전화번호를 입력하세요');
            $("input[name=telNO]").focus();
            return false;
        }
        if(address==""){
            alert('주소를 입력하세요');
            $("input[name=address]").focus();
            return false;
        }
    });
});
</script>
</head>
<body>
<form name="myform" action="formChk.php" method="post">
    이름:<input type="text" name="name" id="myname" value="홍길동" size="20" />
    전화:<input type="text" name="telNO" value="010-1234-9999" size="20" />
    주소:<input type="text" name="address" value="" size="50" />
    <input type="button" id="info_form" value="폼정보보기" />
    <input type="submit" value="확인" />
    <input type="reset" value="취소" />
</form>
<p id="demo"></p>
</body>
</html>

 

$("[attribute]")  : [attribute(속성)] selector는 각 selector의 특정 속성을 선택한다.

  • [attribute=value] : 특정 속성과 값을 가진 각 element를 선택한다.
  • $(selector).attr(attribute) : attribute의 값을 Return
  • $(selector).attr(attribute,value) : attribute의 값을 설정
  • $(selector).attr(attribute,function(index,currentvalue)) : function을 사용하여 값을 설정

 

출처 : https://link2me.tistory.com/1415

 

[Javascript] Form 객체 다루기 (자바스크립트 와 jQuery)

HTML Form 은 client의 정보를 입력받는 문서라고 보면 된다. 태그를 이용하여 각종 입력양식을 통해 입력받아 서버로 전달하는 기능을 담당한다.form객체는 document.forms 배열로 표현한다. 파일을 직접

link2me.tistory.com

 

728x90