Submit textbox input without button

Question

The users have a table and in the last row they have 6 different text inputs, one per column.

This inputs will define a variable in the Database. I am trying to think how can I do it to avoid creating a "save" or "submit" button.

The simple way would be to create a combobox with the values, once they select an option, this would be sent to the Database and saved. The problem is that the values can go from 0 to 99 plus "no limit".

It sounds like a very large select box...

How would you solve this problem? Any ideas for a better user experience?

Since the save is carried out without reloading the page, when do I execute the save? Everytime I type a character?

Thanks.

Answer 1

If not showing a submit button is a way of keeping your interface clean. You could also opt to show the submit only once the field is selected. When you submit or click anywhere else, the field is deselected and the submit is made invisible again.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

This sounds like a case of inline editing. We use inline editing across the app that we're developing. What it means is that the data is saved to the server via ajax without a page reload.

Since there is no page reload the user needs to get feedback to show him that he has triggered a save, which can be done by highlighting the saved field (our field flashes green when it's saved or red when there's an error) or by showing a notification somewhere on the screen that notifies the user of a successful or failed save.

The notification needs to contain appropriate error/success messages.

UPDATE: I think the appropriate time for an update to the server would be when the user finished typing, when the field is blurred (When the user clicks away from the field)

Answer 3

How about when the user clicks/tabs away from the field after entering the value, you change the color of the cell to green or something to indicate the value has been accepted.

Answer 4

We use some kind of solution which nimrod mentioned in his answer. The only difference is that we save data after some timeout, say 3-5-10 seconds of inactivity after beginning of typing in the first symbol into field or, of course after leaving the field. This timeout is configurable in our system.

Of course you should indicate to user what is current state of field being edited. We use the following scheme:

• no border around input text box - value is saved
• border around input text box - value is currently being edited

As for "no limit". Depending on particular system sometimes 0 can be used as "no limit set". If value of 0 means that corresponding entity is disabled, maybe you should add separate control to reflect this - checkbox or something else.