Enable a disabled text-field and save modified value

Question

I made a php page where a table is built from a database. Every cell is a disabled input-text, which is supposed to be activated by the mouse click. Once enabled and modified, pressing the enter key (I'm opened to other solutions, i didn't think about this point yet) should store the new value in the database, show it in the table and disable the field again.

I didn't manage to switch the disabler attribute of the input fields, nor everything else after that (can't do that until the disable/enable function will works properly).

These are parts of code that may help you to understand what I mean.

This is the CSS you could see in the next codes:

<style type="text/css">
    .clickable, input[type="text"]:disabled, input[type="number"]:disabled {
        cursor: hand;
    }
    .clickable:hover {
        background: #dcd2ff;
    }
    input[type="text"]:disabled, input[type="number"] {
        background-color: rgba(255,0,0,0);
        border: 0px;
        width: 100%;
        height: 100%;
    }
</style>

This is the first time I take a look on JS, this is how I think the enabler should be:

<script type="text/javascript">
    function edit(cellID) {
        var cell = document.getElementById(cellID);
        cell.disabled = !cell.disabled;
    }
</script>

This is how I built the table:

<table>
    <?php
        // DB connection + select query
        for ($i = 0; $i < $num; $i++)
        {
            // Getting, for example, $a and $b values
            $line_color = ($i % 2 == 0) ? "pair" : "dispair";
            echo "<tr class=\"$line_color\">";
            echo "    <td class=\"clickable\">";
            echo "        <input id=\"$i-1\" onclick=\"edit('$i-1')\" type=\"text\" value=\"$a\" disabled />";
            echo "    </td>";
            echo "    <td class=\"clickable\">";
            echo "        <input id=\"$i-2\" onclick=\"edit('$i-2')\" type=\"number\" value=\"$b\" disabled />";
            echo "    </td>";
            echo "</tr>";
        }
    ?>
</table>

Here you have "another point of view": http://jsfiddle.net/vL2rw/

Tibbelit Tibbelit · Accepted Answer · 2013-11-10T13:39:40

Here's a working solution for the input-elements for your table-cells. Not the best code probably, used to work with jQuery so forgive me there =) http://jsfiddle.net/vL2rw/6/

var clickables = document.getElementsByClassName("clickable");
for(var i = 0; i < clickables.length; i++){
    clickables[i].addEventListener("click", edit, true);
}

function edit(){
    var input = this.getElementsByTagName("input")[0];
    input.removeAttribute("disabled");
    input.focus();
    input.addEventListener("blur", save, false);
}

function save(){
    this.setAttribute("disabled", "disabled");
    // Do your saving here (by ajax?)
    alert("Save!");
}

Som points to think about: - Use jQuery for compability with older browsers like IE8 (or use event-handlers instead of event-listeners) - Maybe check if the value in the input have changed before sending the value to the db by ajax - I uses "blur" event, change to enter-press if you want it that way

Enable a disabled text-field and save modified value

1 Answers