仅获取特定类型的 HTML 表单元素 --> 仅输入类型按钮

Question

我使用以下代码仅禁用按钮，无论它是输入类型=提交、输入类型=按钮还是我创建的表单中的按钮标签。但我意识到我的代码收集了表单中的所有元素，无论是文本、按钮、单选按钮还是复选框等等。这会占用资源。

有没有更便宜的方法来执行我需要的东西，例如 getElementByTagName()，但现在是 getElementByTypeName？我想找到最节省资源的方法。

更新：我尝试不对 document.querySelectorAll('input[type="button"]') 进行编码，因为我想将我的选择限制为当前放置单击按钮的当前表单。对于多表单页面，这将从所有表单中获取所有输入类型按钮。我更喜欢类似 form.getElementByTagName.

的功能

谢谢

这是我的原创javascript:

/** For disabling all elements in any form. */
function preventMultiClicksOld(formParent)
{
  var elements = formParent.elements;
  for(var e=0; e<elements.length; e++)
  {
   if(elements[e].type=="submit" || elements[e].type=="button" || elements[e].tagName=="button")
   { elements[e].disabled=true; }
  }
}

/** For disabling all elements in any form and then submit. */
function preventMultiClicksNSubmit(formParent)
{
  var begin = new Date().getTime();
  this.preventMultiClicksOld(formParent);          
  formParent.submit();
  alert("Form is being submitted. Please hold and do not click or perform anything else!");
  var end = new Date().getTime();
  alert("Time: " + (end-begin));
}

以下是我想为 preventMultiCliks 函数做的事情：

    /** For disabling all elements in any form. */
    function preventMultiClicks(formParent)
    {
      //Disable input type submit
      var elements = formParent.getElementByTypeName("submit");
      for(var e=0; e<elements.length; e++)
      { elements[e].disabled=true; }
      
      //Disable input type button
      var elements = formParent.getElementByTypeName("button");
      for(var e=0; e<elements.length; e++)
      { elements[e].disabled=true; }
      
      //Disabling the button tag buttons only
      elements = formParent.getElementsByTagName("button");
      for(var e=0; e<elements.length; e++)
      { elements[e].disabled=true; }
    }

这是我的样本 HTML:

<form name="myform" action="test.html" method="GET">
<button type="button" onClick="preventMultiClicksNSubmit(this.form);">Tag Button with document submit</button><br>
<input type="button" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Button with document submit"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit regular"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit dengan return true"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit dengan document submit"><br>
<br><br>
<input type="text" name="mytext00001" value="Hahahaha"><br>
<input type="text" name="mytext00002" value="Hahahaha"><br>
<input type="text" name="mytext00003" value="Hahahaha"><br>
<input type="text" name="mytext00004" value="Hahahaha"><br>
<input type="text" name="mytext00005" value="Hahahaha"><br>
<input type="text" name="mytext00006" value="Hahahaha"><br>
<input type="text" name="mytext00007" value="Hahahaha"><br>
<input type="text" name="mytext00008" value="Hahahaha"><br>
<input type="text" name="mytext00009" value="Hahahaha"><br>
<input type="text" name="mytext00010" value="Hahahaha"><br>
<input type="text" name="mytext00011" value="Hahahaha"><br>
<input type="text" name="mytext00012" value="Hahahaha"><br>
<input type="text" name="mytext00013" value="Hahahaha"><br>
<input type="text" name="mytext00014" value="Hahahaha"><br>
<input type="text" name="mytext00015" value="Hahahaha"><br>
<input type="text" name="mytext00016" value="Hahahaha"><br>
<input type="text" name="mytext00017" value="Hahahaha"><br>
<input type="text" name="mytext00018" value="Hahahaha"><br>
<input type="text" name="mytext00019" value="Hahahaha"><br>
<input type="text" name="mytext00020" value="Hahahaha"><br>
<input type="text" name="mytext00021" value="Hahahaha"><br>
<input type="text" name="mytext00022" value="Hahahaha"><br>
<input type="text" name="mytext00023" value="Hahahaha"><br>
<input type="text" name="mytext00024" value="Hahahaha"><br>
<input type="text" name="mytext00025" value="Hahahaha"><br>
<input type="text" name="mytext00026" value="Hahahaha"><br>
<input type="text" name="mytext00027" value="Hahahaha"><br>
<input type="text" name="mytext00028" value="Hahahaha"><br>
<input type="text" name="mytext00029" value="Hahahaha"><br>
<input type="text" name="mytext00030" value="Hahahaha"><br>
<input type="text" name="mytext00031" value="Hahahaha"><br>
<input type="text" name="mytext00032" value="Hahahaha"><br>
<input type="text" name="mytext00033" value="Hahahaha"><br>
<input type="text" name="mytext00034" value="Hahahaha"><br>
<input type="text" name="mytext00035" value="Hahahaha"><br>
<input type="text" name="mytext00036" value="Hahahaha"><br>
<input type="text" name="mytext00037" value="Hahahaha"><br>
<input type="text" name="mytext00038" value="Hahahaha"><br>
<input type="text" name="mytext00039" value="Hahahaha"><br>
<input type="text" name="mytext00040" value="Hahahaha"><br>
<input type="text" name="mytext00041" value="Hahahaha"><br>
<input type="text" name="mytext00042" value="Hahahaha"><br>
<input type="text" name="mytext00043" value="Hahahaha"><br>
<input type="text" name="mytext00044" value="Hahahaha"><br>
<input type="text" name="mytext00045" value="Hahahaha"><br>
<input type="text" name="mytext00046" value="Hahahaha"><br>
<input type="text" name="mytext00047" value="Hahahaha"><br>
<input type="text" name="mytext00048" value="Hahahaha"><br>
<input type="text" name="mytext00049" value="Hahahaha"><br>
<input type="text" name="mytext00050" value="Hahahaha"><br>
<input type="text" name="mytext00051" value="Hahahaha"><br>
<input type="text" name="mytext00052" value="Hahahaha"><br>
<input type="text" name="mytext00053" value="Hahahaha"><br>
<input type="text" name="mytext00054" value="Hahahaha"><br>
<input type="text" name="mytext00055" value="Hahahaha"><br>
<input type="text" name="mytext00056" value="Hahahaha"><br>
<input type="text" name="mytext00057" value="Hahahaha"><br>
<input type="text" name="mytext00058" value="Hahahaha"><br>
<input type="text" name="mytext00059" value="Hahahaha"><br>
<input type="text" name="mytext00060" value="Hahahaha"><br>
<input type="text" name="mytext00061" value="Hahahaha"><br>
<input type="text" name="mytext00062" value="Hahahaha"><br>
<input type="text" name="mytext00063" value="Hahahaha"><br>
<input type="text" name="mytext00064" value="Hahahaha"><br>
<input type="text" name="mytext00065" value="Hahahaha"><br>
<input type="text" name="mytext00066" value="Hahahaha"><br>
<input type="text" name="mytext00067" value="Hahahaha"><br>
<input type="text" name="mytext00068" value="Hahahaha"><br>
<input type="text" name="mytext00069" value="Hahahaha"><br>
<input type="text" name="mytext00070" value="Hahahaha"><br>
<input type="text" name="mytext00071" value="Hahahaha"><br>
<input type="text" name="mytext00072" value="Hahahaha"><br>
<input type="text" name="mytext00073" value="Hahahaha"><br>
<input type="text" name="mytext00074" value="Hahahaha"><br>
<input type="text" name="mytext00075" value="Hahahaha"><br>
<input type="text" name="mytext00076" value="Hahahaha"><br>
<input type="text" name="mytext00077" value="Hahahaha"><br>
<input type="text" name="mytext00078" value="Hahahaha"><br>
<input type="text" name="mytext00079" value="Hahahaha"><br>

Answer 1

你可以这样使用JQuery

var input = $('<input>');
$(input).attr('type',field['type']);
$(input).attr('name',field['name']);
$(input).val(field['value']);
$(input).addClass('form-control');

你甚至可以select输入名字，或者用select或:

搜索部分名字

$("input[name^='mytext00']")

这样你就可以select输入所有以'mytext00'开头的名字了。

如果您要处理动态 DOM 元素，请使用：

$(document).on("click","input",function(){
    $(this).select();
});

Answer 2

您可以使用多重选择器作为 querySelectorAll()

的函数参数

编辑： 扩展 Andrew Li 的评论

var elements = document.forms["myform"].querySelectorAll('button[type="button"],input[type="submit"], input[type="button"]');
for(var i = 0 ;i < elements.length; ++i){
  elements[i].disabled = true;
}

<form name="myform" action="test.html" method="GET">
<button type="button" onClick="preventMultiClicksNSubmit(this.form);">Tag Button with document submit</button><br>
<input type="button" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Button with document submit"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit regular"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit dengan return true"><br>
<input type="submit" onClick="preventMultiClicksNSubmit(this.form);" value="Tipe Submit dengan document submit"><br>
<br><br>
<input type="text" name="mytext00001" value="Hahahaha"><br>
<input type="text" name="mytext00002" value="Hahahaha"><br>
<input type="text" name="mytext00003" value="Hahahaha"><br>
<input type="text" name="mytext00004" value="Hahahaha"><br>
<input type="text" name="mytext00005" value="Hahahaha"><br>
<input type="text" name="mytext00006" value="Hahahaha"><br>
<input type="text" name="mytext00007" value="Hahahaha"><br>
<input type="text" name="mytext00008" value="Hahahaha"><br>
<input type="text" name="mytext00009" value="Hahahaha"><br>
<input type="text" name="mytext00010" value="Hahahaha"><br>
<input type="text" name="mytext00011" value="Hahahaha"><br>
<input type="text" name="mytext00012" value="Hahahaha"><br>
<input type="text" name="mytext00013" value="Hahahaha"><br>
<input type="text" name="mytext00014" value="Hahahaha"><br>
<input type="text" name="mytext00015" value="Hahahaha"><br>
<input type="text" name="mytext00016" value="Hahahaha"><br>
<input type="text" name="mytext00017" value="Hahahaha"><br>
<input type="text" name="mytext00018" value="Hahahaha"><br>
<input type="text" name="mytext00019" value="Hahahaha"><br>
<input type="text" name="mytext00020" value="Hahahaha"><br>
<input type="text" name="mytext00021" value="Hahahaha"><br>
<input type="text" name="mytext00022" value="Hahahaha"><br>
<input type="text" name="mytext00023" value="Hahahaha"><br>
<input type="text" name="mytext00024" value="Hahahaha"><br>
<input type="text" name="mytext00025" value="Hahahaha"><br>
<input type="text" name="mytext00026" value="Hahahaha"><br>
<input type="text" name="mytext00027" value="Hahahaha"><br>
<input type="text" name="mytext00028" value="Hahahaha"><br>
<input type="text" name="mytext00029" value="Hahahaha"><br>
<input type="text" name="mytext00030" value="Hahahaha"><br>
<input type="text" name="mytext00031" value="Hahahaha"><br>
<input type="text" name="mytext00032" value="Hahahaha"><br>
<input type="text" name="mytext00033" value="Hahahaha"><br>
<input type="text" name="mytext00034" value="Hahahaha"><br>
<input type="text" name="mytext00035" value="Hahahaha"><br>
<input type="text" name="mytext00036" value="Hahahaha"><br>
<input type="text" name="mytext00037" value="Hahahaha"><br>
<input type="text" name="mytext00038" value="Hahahaha"><br>
<input type="text" name="mytext00039" value="Hahahaha"><br>
<input type="text" name="mytext00040" value="Hahahaha"><br>
<input type="text" name="mytext00041" value="Hahahaha"><br>
<input type="text" name="mytext00042" value="Hahahaha"><br>
<input type="text" name="mytext00043" value="Hahahaha"><br>
<input type="text" name="mytext00044" value="Hahahaha"><br>
<input type="text" name="mytext00045" value="Hahahaha"><br>
<input type="text" name="mytext00046" value="Hahahaha"><br>
<input type="text" name="mytext00047" value="Hahahaha"><br>
<input type="text" name="mytext00048" value="Hahahaha"><br>
<input type="text" name="mytext00049" value="Hahahaha"><br>
<input type="text" name="mytext00050" value="Hahahaha"><br>
<input type="text" name="mytext00051" value="Hahahaha"><br>
<input type="text" name="mytext00052" value="Hahahaha"><br>
<input type="text" name="mytext00053" value="Hahahaha"><br>
<input type="text" name="mytext00054" value="Hahahaha"><br>
<input type="text" name="mytext00055" value="Hahahaha"><br>
<input type="text" name="mytext00056" value="Hahahaha"><br>
<input type="text" name="mytext00057" value="Hahahaha"><br>
<input type="text" name="mytext00058" value="Hahahaha"><br>
<input type="text" name="mytext00059" value="Hahahaha"><br>
<input type="text" name="mytext00060" value="Hahahaha"><br>
<input type="text" name="mytext00061" value="Hahahaha"><br>
<input type="text" name="mytext00062" value="Hahahaha"><br>
<input type="text" name="mytext00063" value="Hahahaha"><br>
<input type="text" name="mytext00064" value="Hahahaha"><br>
<input type="text" name="mytext00065" value="Hahahaha"><br>
<input type="text" name="mytext00066" value="Hahahaha"><br>
<input type="text" name="mytext00067" value="Hahahaha"><br>
<input type="text" name="mytext00068" value="Hahahaha"><br>
<input type="text" name="mytext00069" value="Hahahaha"><br>
<input type="text" name="mytext00070" value="Hahahaha"><br>
<input type="text" name="mytext00071" value="Hahahaha"><br>
<input type="text" name="mytext00072" value="Hahahaha"><br>
<input type="text" name="mytext00073" value="Hahahaha"><br>
<input type="text" name="mytext00074" value="Hahahaha"><br>
<input type="text" name="mytext00075" value="Hahahaha"><br>
<input type="text" name="mytext00076" value="Hahahaha"><br>
<input type="text" name="mytext00077" value="Hahahaha"><br>
<input type="text" name="mytext00078" value="Hahahaha"><br>
<input type="text" name="mytext00079" value="Hahahaha"><br>

仅获取特定类型的 HTML 表单元素 --> 仅输入类型按钮

Getting a specific types of HTML form elements only --> JUST input type button

html

javascript

element