Use onchange in a div

Question

Is it possible to use onchange event in a <div>?

Because my <div> changes its text inside.

Can I do something like this?

<div id="name" onchange="calculateTotal();"></div>

Does the user change the text or do you do it programmatically? — pimvdb, Jul 13 '11 at 08:34
@Rafael Santos: When PHP updates it, do you do it through AJAX or through a new page request? — pimvdb, Jul 13 '11 at 08:35
It can't be changed with PHP, it is either changed by Javascript (PHP -> Ajax -> Javascript) or pregenerated by PHP. — bezmax, Jul 13 '11 at 08:36
[Specification](http://www.w3.org/TR/html4/interact/scripts.html) says: *The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.* So no, it is not possible like this. Suggestion: When you change the content, compare the new value against the old one and perform the action. — Felix Kling, Jul 13 '11 at 08:37
@Rafael Santos: Well, in case you do it with Ajax - you should trigger your change event manually in Ajax callback function. What framework do you use for AJAX? And could you paste your AJAX code and update your question with new info? — bezmax, Jul 13 '11 at 08:38

score 26 · Answer 1 · answered Jul 13 '11 at 08:36

26

No; the onchange attribute is only applicable to form field elements (input, select, textarea, etc).

answered Jul 13 '11 at 08:36

Thanks for your answer.How do I do it? – Rafael Morais dos Santos Jul 13 '11 at 08:38
1

Link to documentation related to this? – Robert Koritnik Jan 21 '15 at 13:51
By now the keygen HTML-Element is supported as well. Here is the link to the documentation: Have a look under "Technical Details" Have a look here https://www.w3schools.com/tags/ev_onchange.asp – Björn Böing Jun 08 '17 at 08:24

score 4 · Accepted Answer · answered Jul 13 '11 at 08:37

4

Since you say you're using AJAX, why not execute the function when you update the text. I'm not sure if you use any library, but in case it's jQuery just do:

 $.ajax({ ...,
          success: function() {
               ... other things ...
               ... setting div text ...
               calculateTotal();
          }
       });

answered Jul 13 '11 at 08:37

pimvdb

151,816
78
307
352

I am using CakePHP, and jquery. – Rafael Morais dos Santos Jul 13 '11 at 08:40
@Rafael Santos: Then this should do the job. Whatever happens on the PHP side, PHP just delivers the appropriate data which is out of scope for your problem. – pimvdb Jul 13 '11 at 08:40

score 4 · Answer 3 · answered Jul 13 '11 at 08:43

4

As you are changing the text yourself, just call calculateTotal when the AJAX call completes and the text has been placed in the element.

Example (using jQuery):

$('#name').load('GetFragment.php', calculateTotal);

answered Jul 13 '11 at 08:43

Guffa

687,336
108
737
1,005

Griffin · Answer 4 · 2022-10-14T15:49:49.497

It's a bit over most webdesigners paygrade, but it's not any problem to monitor a div using the dom. It's also pure vanilla javascript, so nothing required.

The most easy way to show it is with a example. The Div is editable so just click on it and type something and your javascript console will show what is going on. (if you don't know your way around the javascript debugger this might be to hard for you, so just learn it ;) )

<html>
<head>
<script>
        // Run the code once the DOM is created, think jquery $(function(){}); but HTML5
        document.addEventListener("DOMContentLoaded", function () {
            const commandlineDiv = document.getElementById('commandline');
            function mutationCallback(mutationsList, observer) {
                console.log(mutationsList);
                console.log(observer);
                for (const mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        console.log('A child node has been added or removed.');
                    } else if (mutation.type === 'attributes') {
                        console.log('The ' + mutation.attributeName + ' attribute was modified.');
                    } else {
                        console.log('mutation.type: ' + mutation.type);
                        console.log('New value ' + JSON.stringify(mutation.target.data));
                    }
                }
            }
            // Create an observer instance linked to the callback function
            const observer = new MutationObserver(mutationCallback);
            // What to observe
            const mutationConfig = { attributes: true, childList: true, subtree: true, characterData: true };
            observer.observe(commandlineDiv, mutationConfig);
        })

</script>
</head>
<body>
<div id="commandline" contentEditable="true">commandline</div>
</body>
</html>

Great example. The OP doesn't actually need this for his problem, but this is an actual answer to the question. — Francisco Zarabozo, Dec 09 '21 at 21:51

score 3 · Answer 5 · answered Nov 16 '21 at 04:18

3

You can use 'onInput' instead of 'onChange'.

<div className="inputDiv" contenteditable="true" onInput={(e) => { console.log(e.currentTarget.textContent) }} />

Check the console log with Chrome Developer Tools (F12):

References: https://stackoverflow.com/a/52614631/8706661

answered Nov 16 '21 at 04:18

HellJosun

129
1
10

2

This is for reactjs. Not for html and js – KOMODO Apr 25 '22 at 05:43

score 1 · Answer 6 · answered Jul 13 '11 at 08:39

1

Onchange is called when user changed input value. So answer is yes, but it will have no effect. I assume you change content programmatically, so add simple code which will call this function

answered Jul 13 '11 at 08:39

SergeS

11,533
3
29
35

what's the input value of a div? – Leo Aug 04 '17 at 19:44

score 0 · Answer 7 · answered Sep 04 '19 at 04:17

0

You can use onblur event. Onblur event working on table,div etc.

<div id="name" onblur="calculateTotal();"></div>

answered Sep 04 '19 at 04:17

Sumit Kumar Gupta

2,132
1
22
21

score 0 · Answer 8 · answered Nov 15 '21 at 16:56

0

Change your div to a textarea or button or input You can't use onchange in div

answered Nov 15 '21 at 16:56

djadweb

29
2

Use onchange in a div

8 Answers8

Linked