Home Ask Login Register

Developers Planet

Your answer is one click away!

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


threed February 2016

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

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

var theForm = document.getElementById('theform');
theForm.addEventListener('input', function(){
<form id="theform">
  <input />

Post Status

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


Leave an answer

Quote of the day: live life