>웹 프론트엔드 >JS 튜토리얼 >양식 ID를 가져오는 중입니다. 그것은 당신이 생각하는 것이 아니다

양식 ID를 가져오는 중입니다. 그것은 당신이 생각하는 것이 아니다

Susan Sarandon
Susan Sarandon원래의
2024-10-02 18:18:29554검색

Getting form id. It is not what you think

다음과 같은 양식을 받은 경우가 있습니다.

<form id="hello">
   <input type="hidden" name="id" />
</form>

그리고 자바스크립트를 사용하여 ID를 검색하려고 했습니다.

const form  = document.getElementById("#hello")
console.log(form.id)

그러나 이로 인해 다음이 반환되었습니다.

   <input type="hidden" name="id" />

대신 HTMLElement를 사용하세요. 따라서 이 문제를 완화하기 위해 대신 getAttribute 함수를 사용했습니다.

const form  = document.getElementById("#hello")
console.log(form.getAttribute('id'))

내가 사용한 곳

처음에는 이 예가 다소 관련 없는 문제인 것 같다고 생각했습니다. 하지만 제 경우에는 HTMLElement가 인수로 수신되는 유틸리티 라이브러리를 개발하고 있었습니다.

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.id
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

내 경우에는 이 함수를 사용하여 양식 활성화를 위한 논리를 배치했는데 이름 ID가 있는 숨겨진 입력이 내 양식의 입력 필드였기 때문에 버튼을 검색하지 못했습니다.

그래서 저는 다음과 같이 했습니다.

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.getAttribute('id');
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

내 양식 내에 존재하는 입력 및 해당 이름과 관련된 id 속성을 받았는지 확인합니다.

위 내용은 양식 ID를 가져오는 중입니다. 그것은 당신이 생각하는 것이 아니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.