Question

I’m working on a timesheet application. I’d like to add an autosave functionality.
Let’s say I have a form like this:

<form id="timesheet" action="save_timesheet.html" method="POST">
<input type="text" id="day1taskid2" />
<input type="text" id="day2taskid2" />
<input type="text" id="day3taskid2" />
<input type="text" id="day41taskid2" />
...
</form>

If a user inserts a new value (= onChange) I’d like to get that specific value and send it to my controller (using JSON/Ajax). For example: I add 2 hours to a specific textbox, and the jQuery ajax should do the update onChange. It’s pretty hard to find a working example. I’ve seen a lot of examples using a form, but I’m not submitting the whole form, only one small textbox. There can be over 70 textboxes on one screen, depending on the amount of tasks to show.

What do I need? Could you give me an easy-to-understand example for this case? I’m using Spring 2.x.

Added the solution 😉

Answer 1

I’m using jQuery AJAX for the call to my controller.

My view:

function doUpdate(id, taskid){
        var x = id.value;
        var firstday = document.getElementById('firstweek').value;
        var pid = document.getElementById('projectid').value;

        if (x >=0 && x <= 24 && x != ""){
            $.post("savets.html", { hours: x, id: id.id, taskid: taskid, firstday: firstday, pid: pid }, function(data) {
                alert("callback");  
            });  
        } else {
            alert("Please enter a valid number: 0 - 24");
        }

My Controller:

@RequestMapping(value = { "/savets.html" }, method = RequestMethod.POST)
public String addTimeRecord(ModelMap model, HttpServletRequest request,
        ) {
    System.out.println("Doing the insert onUpdate with value = "
            + request.getParameter("hours") + " for ID "
            + request.getParameter("id") + " " 
            + request.getParameter("firstday")  + " " 
            + request.getParameter("taskid"));

Form:

<input type="text" onChange=doUpdate(id of my record, the taskid) />

The rest is selfexplanatory. I have hidden values in my form, I get them using Javascript. After that I call the controller which will execute the update (I did not add this code, as it is a simple check + insert)