如何使用javascript单击没有单击事件的按钮?

时间:2014-09-19 17:37:25

标签: javascript html

如何使用javascript点击没有ID的按钮?通常,我会做类似的事情:

document.getElementById("button").click();

这是html:

<form accept-charset="UTF-8" action="https://example.com/account/login" id="customer_login" method="post"><input name="form_type" type="hidden" value="customer_login" />
  <input name="utf8" type="hidden" value="✓" />
  <label for="customer_email" class="label">Email Address</label>
  <input type="email" value="" name="customer[email]" id="customer_email" class="text" />

  <label for="customer_password" class="label">Password</label>
  <input type="password" value="" name="customer[password]" id="customer_password" class="text" size="16" />

 <div class="action_bottom">
    <input class="btn" type="submit" value="Sign In" />
    <span class="note">or <a href="http://example.com">Return to Store</a></span>
  </div>
  </form>

我可以填写这样的电子邮件和密码框:

document.getElementById("customer_email").value = "myemail@mail.com";
document.getElementById("customer_password").value = "passwordtoenter";

2 个答案:

答案 0 :(得分:0)

您可以使用getElementsByClassName方法按类定位元素。此方法返回类似数组的列表,因此您需要确切地知道要尝试单击的按钮。假设只有一个按钮类为“btn”,或者这个按钮在文档流程中排在第一位 - 你可以这样做:

document.getElementsByClassName("btn")[0].click();

答案 1 :(得分:0)

我个人会用jQuery来完成这个。使用纯JavaScript这些天看起来比实际更加时髦。例如:

$('#customer_email').val("myemail@mail.com");
$('#customer_password").val("passwordtoenter");
$('#customer_login .btn').click();

jQuery中的选择器使JS的生活变得更加轻松。我不确定让javascript调用点击的意图是什么,而不是让表单提交自己。如果您要进行一些自定义提交逻辑,可以使用:

$("#customer_login .btn').on('click', function(e) {
  //if you need to prevent the click events default action
  e.preventDefault();
  //Custom logic here
});