Get notified when a certain field change in NewForm.aspx

Question

In NewForm.aspx i have three fields (StartTime, Duration, And EndTime), When user fill StartTime and Duration, I want javascript to calculate and fill EndTime automatically. I cant use:

_spBodyOnLoadFunctionNames.push("...");

because on onload the StartTime and Duration are not filled yet. So I tried:

var control = getTagFromIdentifierAndTitle("input", "", "StartTime");
control.observe('change', function(){alert('ola')});
Event.observe('change', function(){alert('ola')});

*for the sake of test, i put starttime as normal text field.

It didnt worked either. I dont want to create new NewForm1.aspx and do everything manually because if i do so i will have to actualize this form everytime new fields are added in the list. So i want to acomplish it in javascript. Do you have any idea how can i accomplish it?

Answer 1

Here is example for that functionality. Add and finish this code to the page or separate js file:

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("InitEndDateCalculation");

var inptStartTime;
var inptDuration;
var inptEndTime;

function InitEndDateCalculation() {
    inptStartTime=getTagFromIdentifierAndTitle("input", "DateTimeFieldDate", "Start Time");
    inptDuration=getTagFromIdentifierAndTitle("input", "TextField", "Duration");
    inptEndTime=getTagFromIdentifierAndTitle("input", "DateTimeFieldDate", "End Time");

    inptStartTime.setAttribute('onvaluesetfrompicker', "CalcEntTime();");
    $(inptStartTime).observe('change', function(){ CalcEntTime(); }); 
    $(inptDuration).observe('change', function(){ CalcEntTime(); }); 
}

function CalcEntTime() {
    var endDate;
    //TODO: Calculate end date by inptStartTime.value and inptDuration.value
    inptEndTime.value=endDate;
}

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
  var len = identifier.length;
  var tags = document.getElementsByTagName(tagName);
  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
      return tags[i];
    }
  }
  return null;
}
</script>

I made quick test and it worked on standard wss events list new form.