2

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

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Shtarley
  • 313
  • 9
  • 22
  • I think [addEventListener vs onclick](http://stackoverflow.com/q/6348494/1529630) covers your question. – Oriol Feb 08 '16 at 23:26
  • in pure javascript `document.getElementById('myform').addEventListener('input', function(){//do your stuff here});`, in jQuery `$('#myform').on('input', function(){//your code here});` – Mi-Creativity Feb 08 '16 at 23:30
  • also you can use `document.querySelector('#myform')` instead of `document.getElementById('myform')`.. and `bind` word instead of `on` in jQuery.. and keep in my mind `addEventListener` is not supported in IE8 and below you need to use `attachEvent` instead, check http://stackoverflow.com/questions/9769868/addeventlistener-not-working-in-ie8 for how to fix it – Mi-Creativity Feb 08 '16 at 23:34

1 Answers1

0

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>
Trevor
  • 13,085
  • 13
  • 76
  • 99