CODEWITHSUNDEEP
javascript
rubo77
rubo77

Reputation: 20835

Add an onchange event listener to an html input field

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?

Upvotes: 18

Views: 50214

Answers (4)

idmean
idmean

Reputation: 14875

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

Upvotes: 4

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

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>

Upvotes: 0

Michal Leszczyk
Michal Leszczyk

Reputation: 1889

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.

Upvotes: 24

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use addEventListener in your window.onload

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

addEventListener

Upvotes: 3

Related Questions