Add an onchange event listener to an html input field

Question

I would like to add an onchange event to those input fields without jquery:

<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">

I can already call the object with

<script type="text/javascript">
    alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>

In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?

How do I add an onchange event with javascript?

document.getElementById('cbid.wizard.1._latitude').addEventListener('change',function() { <stuff here> },false); should work. — RevanProdigalKnight
– RevanProdigalKnight, Commented Jul 21, 2014 at 12:35

Michal Leszczyk · Accepted Answer · 2014-07-21 12:41:00Z

25

Ummm, attach an event handler for the 'change' event?

pure JS

document.getElementById('element_id').onchange = function() {
  // your logic
};

// or

document.getElementById('element_id').addEventListener(
  'change',
  callbackFunction,
  false
);

jQuery

$('#element_id').change(function() {
  // your logic
});

Note

Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.

edited Jul 21, 2014 at 12:41

answered Jul 21, 2014 at 12:35

Michal Leszczyk

1,90916 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

idmean Over a year ago

Basically he's asking for a solution without jquery

rubo77 Over a year ago

But its nivce to have the jQuery equivalent too

Nathan Arthur · Accepted Answer · 2019-09-25 12:49:04Z

4

document.getElementById('cbid.wizard.1._latitude').onchange = function(){
   //do something
}

GlobalEventHandlers.onchange docs

or

document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
    //do something
});

EventTarget.addEventListener docs

edited Sep 25, 2019 at 12:49

Nathan Arthur

9,2977 gold badges65 silver badges83 bronze badges

answered Jul 21, 2014 at 12:34

idmean

15k9 gold badges63 silver badges90 bronze badges

3 Comments

rubo77 Over a year ago

Don't I need the window.onload?

idmean Over a year ago

You should use window.onload.

Brian Over a year ago

addEventListener("change", function(){...}); seems to work for the last element in the document if used in the same page how can I solve this. I have three sets of forms on the same page but the change event only affects the one I put last.

Sajad Karuthedath · Accepted Answer · 2014-07-21 12:37:39Z

3

use addEventListener in your window.onload

    window.onload=function(){    
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
            //do something
        });
    };

addEventListener

answered Jul 21, 2014 at 12:37

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Comments

Jayesh Goyani · Accepted Answer · 2014-07-21 12:42:13Z

0

Please try with the below code snippet.

<body>
    <input type="text" id="cbid.wizard.1._latitude">
    <input type="text" id="cbid.wizard.1._longitude">
    <script type="text/javascript">
        var txt1 = document.getElementById('cbid.wizard.1._latitude');
        txt1.addEventListener('change', function () { alert('a'); }, false);
    </script>
</body>

answered Jul 21, 2014 at 12:42

Jayesh Goyani

11.2k11 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

Add an onchange event listener to an html input field

4 Answers 4

Note

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Note

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related