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?
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?
Share Improve this question edited Jun 8, 2012 at 16:47 p.campbell 101k70 gold badges262 silver badges326 bronze badges asked Jun 8, 2012 at 16:38 Mayer MMayer M 2431 gold badge6 silver badges19 bronze badges4 Answers
Reset to default 11onchange 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} )
Do this:
window.onload = function() {
document.getElementById('id_TeamField').addEventListener('change', function() {
alert('test');
});
};
Or with jQuery:
$('#id_TeamField').on('change', function() {
alert('test');
});
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>
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>