仅获取特定类型的HTML表单元素 - ＆gt; JUST输入类型按钮

时间：2017-06-21 05:20:39

标签： javascript html element

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

是否有更便宜的方式来执行我需要的东西，例如getElementByTagName（），但是现在用于getElementByTypeName？我想找到资源效率最高的方式。

更新：我尝试不记录.querySelectorAll（＆＃39;输入[type =＆＃34;按钮＆＃34;]＆＃39;）代码因为我想将我的选择限制在点击的当前表单中按钮当前放置。对于多表单页面，这将获得所有表单中的所有输入类型按钮。我更喜欢类似的函数，如form.getElementByTagName。

谢谢

这是我原来的javascript：

＆＃13;
＆＃13; 
/** 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));
}
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
    /** 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; }
    }
＆＃13;
＆＃13;
＆＃13;

这是我的示例HTML：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

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

的函数参数

编辑：扩展Andrew Li的评论

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：-1)

您可以像这样使用JQuery 

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

您甚至可以选择输入的名称，或使用选择器搜索名称的一部分：

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

这样您就可以选择以＆＃39; mytext00＆＃39;开头的所有输入。

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

$(document).on("click","input",function(){
    $(this).select();
});
相关问题
最新问题