Shtarley February 2016

How to add "oninput" to html form tag, targeting the tag by id instead of editing the form tag itself

I want to use this code that I found online http://jsfiddle.net/2GhQX/ in my contact form in order to show the range slider values in real time, however, my form was created using a wordpress plugin, so I can't add any javascript to the <form> tag. The plugin does allow me to add id's and classes to the form tag though (plugin: contactform7).

Is there a way to add oninput="amount.value=rangeInput.value" to the <form> tag, without editing the form tag itself by maybe targeting that form using an id or a class?

I know very very little about javascript, so I will appreciate the help.

So instead of

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

I want my form tag to look like this:

<form id="myform">

and then add the oninput to the tag targeting it by the form id using javascript

Answers


threed February 2016

You can use the document.getElementById() method to get access to the form:

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>

Post Status

Asked in February 2016
Viewed 3,310 times
Voted 11
Answered 1 times

Search




Leave an answer