首页  >  文章  >  web前端  >  获取表单 ID。这不是你想的那样

获取表单 ID。这不是你想的那样

Susan Sarandon
Susan Sarandon原创
2024-10-02 18:18:29520浏览

Getting form id. It is not what you think

我有一个案例,其中有此表格:

<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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn