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

【问题标题】：Getting a specific types of HTML form elements only --> JUST input type button仅获取特定类型的 HTML 表单元素 --> 仅输入类型按钮
【发布时间】：2017-06-21 05:20:38
【问题描述】：

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

是否有更便宜的方法来执行我需要的操作，例如 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>

【问题讨论】：

  • document.querySelectorAll('input[type="button"]')
  • 我尝试不使用该代码，因为我想将我的选择限制为当前表单。用于多表单页面。

标签： javascript html element


【解决方案1】：

您可以使用多个选择器作为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>

【讨论】：

  • 测试了你的代码并喜欢它。谢谢你。这太棒了。
【解决方案2】：

你可以像这样使用 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']")

这样您就可以选择名称以“mytext00”开头的所有输入。

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

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

【讨论】：

  • 这没有回答问题。一开始没有请求jquery。此外，您提供的 jquery 并未演示选择问题所指的元素（按钮）。
  • 我尽量避免使用 JScript 并避免添加 js 库。试图亲吻它。
猜你喜欢
  • 1970-01-01
  • 2010-11-08
  • 2010-12-04
  • 1970-01-01
  • 1970-01-01
  • 2012-07-21
  • 1970-01-01
  • 2011-04-10
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode