Question

我正在为我的公司开发一个项目，我们不允许以任何方式更改HTML。在使用html进行数据验证中已经设置了一个页面。页面上需要单独形式的验证问题，每个表单都包含自己的＆＃34;提交＆＃34;按钮。虽然两个提交按钮都具有相同的＆＃34; id＆＃34;。有没有办法弄清楚如何隔离每个按钮以应用不同的＆＃34; .onclick＆＃34;他们的方法。提前谢谢。

Answer 1

所以，如果你一步一步这是可行的（在旁注：HTML文档从不有多个元素共享相同的id tage）。

我的解决方案要求您确切地知道页面上有多少type="submit"个输入以及按照什么顺序，我假设您这样做，因为您说HTML无法更改。

我们这样做：

// 1. Get all the inputs on page
var inputs = document.getElementByTagName('input');

// 2. Let's grab only the submit ones
var submits = [];
for(var i = 0; i < inputs.length; i++) {
  if(inputs[i].getAttribute('type') === 'submit') {
    submits.push(inputs[i]);
  }
}

// 3. Add the correct onclick listeners
submits[0].addEventListener("click", onclick1, false); // Button 1
submits[1].addEventListener("click", onclick2, false); // Button 2

// 4. Define the onclick functions
function onclick1(event) {
  // Do something
}

function onclick2(event) {
  // Do something
}

以上内容可以扩展为首先获取每个表单，然后浏览该表单中的输入，但如果您确切知道表单的数量和每个表单的type="submit"输入，则不需要这样做。

Answer 2

您可以使用表单标记＆＃39; onsubmit＆＃39;事件而不是使用按钮事件。我假设表单的操作属性指向唯一的位置。

function validateThing() {
  var input = document.getElementById('input1');
  // return truthy value
  return input.value.length < 6;
}

document.getElementById('form').onsubmit = function(e) {
  var form = e.target;
  var action = form.getAttribute('action');

  // won't submit if one of these returns false
  if (action === '/someurl') {
    return validateThing();
  } else if (action === '/anotherurl') {
    return valideAnotherThing();
  }
}

表格验证项目

2 个答案: