如何将"oninput“添加到html表单标签中，通过id确定标签的目标，而不是编辑表单标签本身。

Question

我想使用我在联系人表单中找到的在线http://jsfiddle.net/2GhQX/代码来实时显示范围滑块的值，但是，我的表单是使用wordpress插件创建的，所以我不能向<form>标签添加任何javascript。这个插件允许我在表单标签中添加id和类( plugin : contactform7)。

有没有一种方法可以在不编辑表单标记本身的情况下将oninput="amount.value=rangeInput.value"添加到<form>标记中，方法可能是使用id或类来定位表单？

我对javascript知之甚少，所以我将非常感谢你的帮助。

因此，不是

<form oninput="amount.value=rangeInput.value">

我希望我的表单标签看起来像这样：

<form id="myform">

，然后使用javascript将oninput添加到以表单id为目标的标记中。

Answer 1

您可以使用document.getElementById()方法访问表单：

var myForm = document.getElementById('my-form-id');
myForm.addEventListener('input

​

var theForm = document.getElementById('theform');
theForm.addEventListener('input', function(){
  alert('hi');  
});

<form id="theform">
  
  <input />
  
</form>

​