Triggering events on input elements using javascript

Question

I want to trigger an event hen the value of an input element using javascript.The value of the input element is changed using script ,and is not typed.I know that the onChange event fires not after the value is changed ,but after the value is changed and element looses focus(mouse is clicked outside the element.)..Here the input element does not loose focus.So onChange event willnot fire.So how to do that.. The following is the script ,once i tried and failed

<html>
 <head>
       <script type = 'text/javascript'>
                function changed()
                {
                          alert('changed');
                }
                function change()
                {
                       document.getElementById('myId').value = 'Hello';
                }


       </script>
 </head>
 <body>
    <input type = 'text'  id = 'myId' onChange= 'javascript:changed();'/>
    <input type ='button'  value = 'change'  onClick = 'javascript:change();'/>
 </body>

I mean ,the function changed() should be called when the content inside textbox is changed using the function change().How to do that. Here is the jsfiddle for the code http://jsfiddle.net/BFz2a/

What do you mean by ", javascript: is obsolete in inline event handlers"? Also please post this as your answer with some explanation — Jinu Joseph Daniel
– Jinu Joseph Daniel, Commented Mar 16, 2012 at 17:15
If the value of the input element is changed using script, that's when you can trigger the event... — Zack Macomber
– Zack Macomber, Commented Mar 16, 2012 at 17:18

Rob W · Accepted Answer · 2012-03-16 17:17:33Z

2

Call changed() after change(): http://jsfiddle.net/BFz2a/11/

function change() {
    document.getElementById('myId').value = 'Hello';
    changed(); // Calls the other function
}

Contents inside event listeners (onchange=" this is inside ") is parsed as JavaScript. So, javascript: is obsolete. In fact, it is treated as a label.
The javascript:... prefix is only meaningful in links, eg <a href="javascript:alert('test');">Test</a>.

answered Mar 16, 2012 at 17:17

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

2 Comments

Jinu Joseph Daniel Over a year ago

it is not working ...I need to get the alert message when the content inside the text is changed using the button ..

Rob W Over a year ago

@JinuJD See the line on top of my answer.

Nemoy · Accepted Answer · 2012-03-16 17:20:17Z

1

The answer is simple

function change(){
   var el = document.getElementById('myId');
   el.value = 'Hello';
   el.onchange(); // or simply call changed();
}

and javascript: is not needed inside onclick and onchange simply use

onClick = "change();"

answered Mar 16, 2012 at 17:20

Nemoy

3,4471 gold badge17 silver badges14 bronze badges

Comments

scrappedcola · Accepted Answer · 2012-03-16 17:21:14Z

1

In your function that handles the click event you could manually call the onchange event for the Input.

function change()
{
    var inputEl = document.getElementById("myId");
    inputEl.value = 'Hello';
    inputEl.onchange();
}

answered Mar 16, 2012 at 17:21

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

Comments

The Alpha · Accepted Answer · 2012-03-16 17:32:29Z

0

function change(){
    var el=document.getElementById('myId');
    el.value="Something";
    changed(el);
}
function changed(el){
    alert(el.value);
}
change();

A fiddle is here.

edited Mar 16, 2012 at 17:32

answered Mar 16, 2012 at 17:26

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Collectives™ on Stack Overflow

Triggering events on input elements using javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related