Question

I have a JSF <h:datatable> with two columns.

• column 1 : <h:outputText>, gets populated from bean data.
• coulmn 2 : <h:inputText> boxes.

There is a “Total” field outside the table and I want to have it show the total of fields as entered in column2 in realtime. So I did searching around and found out that I need a JavaScript to do this. I am however quite new to JS.

Where I am confused is how to access the value of the input text box. What I have done so far:

function totalFrom() {
    var element = document.getElementById('transferFundsForm:fundsFromTable:0:from_transferAmt');
    if(element != null){
        document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value = document.forms['transferFundsForm']['transferFundsForm:totalFrom'].value+ element;
    }
}

As far as I understand, the transferFundsForm:fundsFromTable:0, here 0 represents the first row. How do I refer to the element in column that is being edited?

I have called this function on onblur event of the textBox in column.

Also I read that I can use <f:ajax> for this as well, but I am using JSP instead of Facelets, so I can’t use <f:ajax>.

Answer 1

The HTML DOM element representation of <table> element has a rows property which gives you an array of all <tr> elements. The HTML DOM representation of this <tr> element has a cells property which gives you an array of all <td> elements.

So, provided that the 2nd column of the table contains only one <input> element which holds the value you’d like to sum up, and that totalFrom is an <input> element (at least, you’re attempting to set the value property and not innerHTML), you could achieve this as follows:

function totalFrom() {
    var table = document.getElementById('transferFundsForm:fundsFromTable');
    var total = 0;

    for (var i = 0; i < table.rows.length; i++) {
        var secondColumn = table.rows[i].cells[1];
        var input = secondColumn.getElementsByTagName('input')[0];
        var value = parseInt(input.value);

        if (!isNaN(value)) {
            total += value;
        }
    }

    document.getElementById('transferFundsForm:totalFrom').value = total;
}

If the totalFrom is however a <h:outputText id="totalFrom">, then set it as follows instead:

    document.getElementById('transferFundsForm:totalFrom').innerHTML = total;