양식 또는 설문지를 작성하는 동안 사용자 입력 값을 특정 필드에 할당해야 하는 요구 사항이 있을 수 있습니다. 예를 들어 기밀 항목(예: 암호 또는 인코딩된 값)을 사용하기 위해 추가합니다. 이러한 경우 JavaScript를 통해 숨겨진 입력 요소의 값을 설정하면 데이터를 안전하게 보호하는 데 도움이 됩니다.
이 블로그에서는 JavaScript를 통해 숨겨진 입력 필드의 값을 설정하는 절차에 대해 설명합니다.
JavaScript를 통해 숨겨진 입력 필드의 값을 설정하는 방법은 무엇입니까?
JavaScript를 통해 숨겨진 입력 필드의 값을 설정하려면 다음 접근 방식을 적용하십시오.
방법 1: innerHTML 속성을 통해 숨겨진 요소의 값 설정
“ innerHTML ” 속성은 요소의 HTML 콘텐츠를 반환합니다. 이 속성은 할당된 숨겨진 입력 필드에 사용자 정의 값을 설정하고 추가하는 데 활용할 수 있습니다.
통사론:
element.innerHTML = 텍스트
위 구문에서 ' 요소 '는 '를 추가해야 하는 요소를 나타냅니다. 텍스트 ' 값.
예
아래에 언급된 예를 살펴보겠습니다.
< 입력 유형 = '숨겨진' ID = '숨겨진 요소' 값 = '' >< 스크립트 >
허락하다 myInput = 프롬프트 ( '텍스트를 입력하세요' , '' ) ;
만약 ( 내입력 ! = null ) {
허락하다 x = 문서.getElementById ( '숨겨진 요소' ) .innerHTML = '숨겨진 요소의 값은 다음과 같습니다. ' + myInput;
알리다 ( 엑스 )
}
스크립트 >
위의 코드 블록에서:
- 먼저 명시된 속성이 있는 입력 필드를 만듭니다.
- “ 유형 ” 값이 있는 속성 숨겨진 '는 숨겨진 필드임을 나타냅니다.
- 그 후, “ 즉각적인 ” 대화 상자는 사용자로부터 값을 받습니다.
- 이제 사용자 정의 값이 ' 없는 ”를 사용하여 만약 ' 질환.
- 마지막으로 '로 숨겨진 입력 필드에 액세스합니다. ID ”를 사용하여 getElementById() ” 메서드를 사용하여 사용자 정의 값을 설정합니다. innerHTML ' 속성.
- 마지막으로 경고를 통해 추가된 값을 표시합니다.
산출
관찰한 바와 같이 사용자 입력 값은 숨겨진 입력 필드에 추가됩니다.
방법 2: jQuery 접근 방식을 사용하여 숨겨진 요소의 값 설정
이 접근 방식에서 jQuery의 ' 값() ” 방식을 사용하여 보이는 입력 텍스트 필드의 값을 숨겨진 입력 필드에 할당합니다.
예
다음 코드를 살펴보겠습니다.
< 피 > 값을 입력하세요 ~을 위한 숨겨진 요소 피 >< 입력 ID = 'myInput' 값 = '' 유형 = '텍스트' />< br >
< 입력 ID = '숨겨진 요소' 유형 = '숨겨진' 값 = '' />
< br >
< 단추 ID = 'btn쇼' > 제출하다 단추 >
< 스크립트 소스 = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > 스크립트 >
< 스크립트 >
$ ( '#btn쇼' ) .에 ( '딸깍 하는 소리' , 기능 ( ) {
허락하다 입력값 = $ ( '#my입력' ) .val ( ) ;
$ ( '#숨겨진 요소' ) .val ( 입력값 ) ;
알리다 ( '숨겨진 요소의 값은 다음과 같습니다. ' + 입력값 ) ;
} ) ;
스크립트 >
위의 코드 줄에서:
- 먼저 명시된 속성이 있는 입력 텍스트 필드를 포함합니다.
- 마찬가지로 '에서 알 수 있듯이 또 다른 숨겨진 입력 필드를 할당합니다. 유형 ' 기인하다.
- 특정 '가 있는
- 그런 다음 '의 도움으로 jQuery 라이브러리를 포함하십시오. 소스 ' 속성은 ' <스크립트> ” 태그.
- JS 코드에서 생성된 버튼에 액세스하고 ' 에() ” 메서드를 사용하여 버튼 클릭 시 기능을 실행합니다.
- 함수 정의에서 보이는 입력 ' 텍스트 ' 필드를 입력하고 '를 사용하여 해당 값을 가져옵니다. 값() ' 방법.
- 다음 단계에서 가져온 값은 숨겨진 입력 '에 할당됩니다. 텍스트 ' 필드를 통해 ' 값() ' 방법.
- 마지막으로 '에 할당된 결과 값을 표시합니다. 숨겨진 입력 필드 '라는 알림을 통해
산출
위의 출력에서 볼 수 있는 입력값 ' 텍스트 ' 필드는 ' 숨겨진 ” 입력 필드.
결론
JavaScript를 통해 숨겨진 입력 필드의 값을 설정하려면 ' innerHTML ' 속성 또는 jQuery ' 값() ' 방법. innerHTML 속성은 사용자 정의 값을 추가하여 원하는 기능을 적용하는 데 사용할 수 있습니다. val() 메서드를 적용하여 보이는 입력 텍스트 필드의 값을 숨겨진 입력 필드에 할당할 수 있습니다. 이 블로그에서는 JavaScript를 통해 숨겨진 입력 필드의 값을 설정하는 절차에 대해 설명했습니다.