onChange event doesn't trigger

Question

I use Internet Explorer 8 and Sharepoint 2007.

Briefing: I have a NewForm with various fields from a list. I need, using javascript, from one of the fields, to get the value introduced by the user (in a textBox) and paste it on other field (other textBox) in the same page, using onChange.

Problem: I'm a JavaScript newbie, and I can't set the event 'onChange' to trigger my function, or at least to trigger an 'alert("Test") ... or simply I'm doing it wrong and don't know why (more likely)...

Let's assume the field I want to work with has as FieldName="IDTeam", type="text" and id="id_TeamField".

//My JS below "PlaceHolderMain"

_spBodyOnLoadFunctionNames.push("setTxtBoxesValues");

function setTxtBoxesValues()
{    
   //snipped

   getField('text','IDTeam').onChange = function(){alert('Test')}; 
   //"getField('text', 'IDTeam).onChange = function(){myFunction()};" 
   //If I want to call myFunction() when onChange event is triggered    
    }

Also, instead of getField, tried this:

document.getElementById('id_TeamField').onChange = function(){alert('Test')};

If I want to call myFunction() when onChange event is triggered

Any idea of what I'm doing wrong?

NSF · Accepted Answer · 2012-06-08T18:13:20.770

11

onchange is an event so either you put it in the tag like this:

<input type="text" id="IDTeam" onchange="(call function here)" />

or you apply addEventListener to that DOM object:

document.getElementById("IDTeam").addEventListener("change", function() {//call function here});

in IE6 you may need: (not sure if it works as few people are using ie6 nowadays)

document.getElementById("IDTeam").attachEvent("onchange", function() {//call function here} )

edited Jun 08 '12 at 18:13

answered Jun 08 '12 at 17:01

NSF

2,499
6
31
55

Tried the "put it in the tag" before (and once more recently just in case). Still didn't work. Don't know if it helps, but now that I look at it... it says "in IE 6.0, 'onchange' attribute is not admitted". – Mayer M Jun 08 '12 at 18:03
@MayerM you should point that out if you are still sticking with ie6. It sucks. See my edition above. – NSF Jun 08 '12 at 18:15
Sry, didn't know... I run it on IE 8, but in Designer 2007, it says "secondary scheme: IE 6.0" (I just saw it :S) ...still nothing :/ thanks, though :) – Mayer M Jun 08 '12 at 18:24
@MayerM simple example goes here: http://jsfiddle.net/mxRtB/ alert will pop up once the input gets changed and blurred(click outside) – NSF Jun 08 '12 at 21:39
Would you mind writting an example by using addEventListener or attachEvent? ----------- In JsFiddle, writting on tag works nicely, but I tried using javascript (as you showed) but didn't work.-------------- Don't know if I'm messing something up or if it's only my browser (it says "Object does not support this property or method"). – Mayer M Jun 11 '12 at 17:43
Sry, didn't post the link-> http://jsfiddle.net/vybxh/5/ but, as I said earlier, didn't work. Just in case, this is the line -> `document.getElementById("IDTeam").addEventListener("change", function() {alert("Test")};` and being the tag -> `` – Mayer M Jun 11 '12 at 19:50
@MayerM Well you forgot to close the bracket and missed a semi-colon after alert function http://jsfiddle.net/vybxh/7/ – NSF Jun 12 '12 at 01:14
Thanks a lot :) Got to change a few things (in the page, not the code) and now it works! Thank you for your help and time :D – Mayer M Jun 18 '12 at 12:22

score 2 · Answer 2 · edited Jan 14 '20 at 04:36

2

Do this:

window.onload = function() { 
    document.getElementById('id_TeamField').addEventListener('change', function() {
        alert('test');
    });
};

Or with jQuery:

$('#id_TeamField').on('change', function() {
    alert('test');
});

edited Jan 14 '20 at 04:36

Arunprasanth K V

20,733
8
41
71

answered Jun 08 '12 at 16:44

PitaJ

12,969
6
36
55

Thanks for the fast response :) Unfortunately, it didn't work :/ (still doesn't do anything). – Mayer M Jun 08 '12 at 17:46
1

@MayerM - Yes, It does: http://jsfiddle.net/kE4CV/ The onchange event doesn't trigger until the input is blurred – PitaJ Jun 08 '12 at 18:01
I'm sure you tested it and worked... but didn't work for me (neither of the solutions). Maybe it's something wrong on my Designer (some config)? I mentioned to NSF that I just noticed, in the page editor options, it says "secondary scheme: IE 6.0", even though I'm running the page in IE8. – Mayer M Jun 08 '12 at 18:52
1

Tried this in that page -> jsfiddle.net/kE4CV Didn't work. It says "Error on page". When I check the error, it says -> Error details Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Date: Mon, 11 Jun 2012 15:01:44 UTC Message: Object doesn't support this property or method Line: 20 Character: 1 Code: 0 URI: [link](http://fiddle.jshell.net/_display/) PS: Line 20 is this line `'document.getElementById('id_TeamField').addEventListener('change', function() { alert('test'); });` – Mayer M Jun 11 '12 at 15:22

score 0 · Answer 3 · answered Jun 08 '12 at 17:27

You can do this by

Adding an event listener

document.getElementById('id_TeamField').addEventListener('change', function(){alert('test');});

or

Adding onChange to the tag

<select onChange='function() { alert('test');}' name='IDTeam' id='id_TeamField' >
   <option>option1</option>
   <option>option2</option>
   <option>option3</option>
</select>

score 0 · Answer 4 · answered Jul 20 '18 at 23:18

this is a little redundant to what everyone else is saying but share since it's more direct:

const select = document.getElementById('select')
const newText = document.getElementById('newText')

select.addEventListener("change", e => {
  console.log(e.target.value)
  newText.value = e.target.value
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="select">
    <option value="url1">tool_ver1</option>
    <option value="url2">tool_ver2</option>
    <option value="url2" selected >tool_ver3</option>
  </select>
  <button type="submit">Retrieve New Release App Options</button>
<div class="textInput spacer">
  <h2>New Release App Options</h2>
  <textarea id="newText"></textarea>
</div>
  
  
</body>
</html>

onChange event doesn't trigger

4 Answers4

Linked

Related