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?

Pellikka

Answer 1

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} )

Countermine

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". – Pellikka

@MayerM you should point that out if you are still sticking with ie6. It sucks. See my edition above. – Countermine

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 :) – Pellikka

@MayerM simple example goes here: jsfiddle.net/mxRtB alert will pop up once the input gets changed and blurred(click outside) – Countermine

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"). – Pellikka

Sry, didn't post the link-> 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 -> <input type="text" id="IDTeam"/> – Pellikka

@MayerM Well you forgot to close the bracket and missed a semi-colon after alert function jsfiddle.net/vybxh/7 – Countermine

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 – Pellikka

Answer 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');
});

Undersized

Thanks for the fast response :) Unfortunately, it didn't work :/ (still doesn't do anything). – Pellikka

@MayerM - Yes, It does: jsfiddle.net/kE4CV The onchange event doesn't trigger until the input is blurred – Undersized

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. – Pellikka

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 PS: Line 20 is this line 'document.getElementById('id_TeamField').addEventListener('change', function() { alert('test'); }); – Pellikka

Answer 3

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>

Hickory

Answer 4

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>

Amaurosis