[FIXED] OnClick event, show pop-up or focus on textbox to add comment

Issue

What I'm trying to achieve is the following. I'm (still) working on a timesheet, and the user has to be able to add a comment.

Comment [ .................. ] for D2

TaskID - Taskname - D1 - D2 - D3 ...
1        Hello      5    3    2
2        Bai        4    2    1
3        I'm back   3    4    3

When a user clicks on a specific textbox, where he has to fill in the hours, an additional textbox should get the comment value of that specific box. When he clicks on another textbox, it should get that value etc, etc.

I don't really know where to look for, or how I could do it best. Any ideas? Javascript? JQuery? I'm currently working with Spring MVC, so it should get the value and add it to a specific modelattribute so it can be submitted.

Another possibility is some kind of pop-up, which appears when you click on an icon next to the textbox...

Solution

I used Javascript to realize this.

Once you enter a certain field, I call a function to fill the commentary with a new classname:

<input type="text" onfocus='addComment(id, index, taskid)' />

Function:

    function addComment(classname, commValue, taskid){
    var comm = document.getElementById('comment');
    var comment = document.getElementById(taskid + classname);
    comm.className = taskid + classname;
    comm.value = comment.value;
}

This will fill the textbox with the value from the latest focused textbox. It will also set the classname using the provided one.

To save the commentary value, I use jQuery Ajax:

function saveComment(){
        var comment = document.getElementById('comment');
        var classn = comment.className;
        var firstday = document.getElementById('firstweek').value;
        var commentval = comment.value;
        var windex = comment.className.indexOf("w");
        var day = comment.className.substring(windex+1, windex+2);
        var taskid = comment.className.substring(0, windex);
        var pid = document.getElementById('projectid').value;

        if (classn != ""){
            var commentSaved = document.getElementById(taskid+comment.className.substring(windex, windex+2));
            commentSaved.value = commentval;
            $.post("savecomm.html", { day: day, comment: commentval, taskid: taskid, firstday: firstday, pid: pid }, function(data) {
                alert("callback");  
            });  
        } else {
            alert("No entries selected");
        }       
    }

Answered By - Geoffrey
Answer Checked By - Senaida (JavaFixing Volunteer)