フォームIDを取得します。それはあなたが考えていることではありません

次のようなフォームがあったことがあります:

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

そして、JavaScript を使用してその 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 中国語 Web サイトの他の関連記事を参照してください。