如果使用Javascript仅具有值和名称属性的按钮，如何单击它

Question

这是表格，我想以编程方式单击使用Javascript的Submit按钮

 <form action="/testseries/go" method="post"> <div class="key"> <i class="fa fa-mobile" aria-hidden="true"></i> <input type="text" name="username" placeholder="Phone Number" required=""> <div class="clearfix"></div> </div> <div class="key"> <i class="fa fa-lock" aria-hidden="true"></i> <input type="password" name="password" placeholder="Password" required=""> <div class="clearfix"></div> </div> <input type="submit" value="Login"> //THIS BUTTON </form> 

问题是我是Java语言的新手，我研究了诸如getElementById ， ClassName等DOM元素，但是在这种情况下，如何单击没有任何DOM的按钮呢？

Answer 1

您可以使用querySelector ：

 const input = document.querySelector('form > input[type="submit"]'); console.log(input.value); 

 <form action="/testseries/go" method="post"> <div class="key"> <i class="fa fa-mobile" aria-hidden="true"></i> <input type="text" name="username" placeholder="Phone Number" required=""> <div class="clearfix"></div> </div> <div class="key"> <i class="fa fa-lock" aria-hidden="true"></i> <input type="password" name="password" placeholder="Password" required=""> <div class="clearfix"></div> </div> <input type="submit" value="Login"> //THIS BUTTON </form> 

用简单的语言来说， 'form > input[type="submit"]'是指具有属性type的select input ，其值是submit ，它是form的子级。

Answer 2

HTMLFormControlsCollection API用于引用<form>标记及其所有表单控件 。 可以使用最少的代码非常有效地使用HFCC。 比较这两个等效的片段：

HFCC -108个字符

var log = document.forms.login;
var L = log.elements;
var b0 = L.btn0;
var b1 = L.btn1;
var s0 = L.sub0;

标准 -231个字符

var log = document.getElementById('login');
var L = document.querySelectorAll('input, button');
var b0 = document.getElementById('btn0');
var b1 = document.getElementById('btn1');
var s0 = document.getElementById('sub0'); 

---

触发点击的JavaScript方法是click() ：

targetObj.click();

而触发触发的是submit() ：

formObj.submit();

---

在以下演示中：

• 将提交的数据发送到实时测试服务器 。 响应将被发回。 密钥值应该为： [username]和[password]如果成功）。

   "form":{"password":"|PASSWORD ENTERED|","username":"|NAME ENTERED|"}, 

• 按钮上的2个按钮测试触发器。

  • 单击触发器单击 。 如果两个文本字段都包含内容，那么您应该收到实时测试服务器的响应。 否则，您将获得一个工具提示，要求指示的文本框包含数据。
  • 单击触发器提交 。 无论文本框内容如何，​​都会发送该表格。 此行为的原因是因为<form>元素是event.target事件的event.target ，并且required属性是由submit按钮上的click事件在内部触发的，因此是前一个触发器的行为。

---

演示

---

 var log = document.forms.login; var L = log.elements; var b0 = L.btn0; var b1 = L.btn1; var s0 = L.sub0; b0.onclick = function(e) { s0.click(); } b1.onclick = function(e) { log.submit(); } 

 fieldset { width: 260px; padding: 10px 5px; } label, input, i { display: inline-block; font: inherit; line-height: 1.5; margin: 5px; } i { transform: translateY(8px) } input[type='submit'] { margin-left: 75% } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <form id='login' action="https://httpbin.org/post" method="post"> <fieldset> <i class="fa fa-user fa-2x" aria-hidden="true"></i> <input type="text" name="username" placeholder="User Name" required><br> <i class="fa fa-lock fa-2x" aria-hidden="true"></i> <input type="password" name="password" placeholder="Password" required><br> <input id='sub0' type="submit" value="Login"> </fieldset> <button id='btn0' type='button'>Trigger Click</button> <button id='btn1' type='button'>Trigger Submit</button> </form>