0

I am trying to make a table cell value dynamic.Initial state is plain display. Onclick, the div changes to input box and a confirm button. On button click, I want it to revert to old display only mode. However the second function not only sets the onclick attribute but also triggers the click event for some reason. I only want the div to go back to state 0. Editable on click. Tried adding a listener as well but same result. Please help me. Thanks in advance.

Please find the JSFiddle link here : http://jsfiddle.net/vjunky123/1bj90kx1/5/

Script and html code :

<script>
    function showinputbox(divid) {
        alert("Inside show function");
        var div = document.getElementById(divid);
        var oldVal = div.firstChild.nodeValue;
        div.innerHTML = "<input type='text' value='" + oldVal + "'>&nbsp;&nbsp;&nbsp;&nbsp;<input type='button' value='Confirm' onclick=\"confirminput('" + divid + "')\">";
        div.setAttribute("onclick", '');
    }

    function confirminput(divid2) {
        alert("Inside confirm function");
        //xmlhttp = new XMLHttpRequest();
        var div = document.getElementById(divid2);
        var newVal = div.getElementsByTagName('input');
        div.innerHTML = newVal[0].value;
    //div.setAttribute("onclick","function() {showinputbox('"+divid2+"');}");
        div.onclick = function() {
                showinputbox(divid2);
        };
}
</script>
<table class="bordered">
    <tbody>
        <tr>
            <th>Rack ID</th>
            <th>Server Count</th>
        </tr>
        <tr>
            <td>A12</td>
            <td>
                <div id="1_A12" onclick="showinputbox('1_A12')">5</div>
            </td>
        </tr>
        <tr>
            <td>A19</td>
            <td>
                <div id="1_A19" onclick="showinputbox('1_A19')">1</div>
            </td>
        </tr>
    </tbody>
</table>
vjunky123
  • 1
  • I believe this will help http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute – James Montagne Oct 03 '14 at 17:40
  • That didn't work. Still getting the same problem. Am I doing anything wrong? div.onclick = function(event) { disabledEventPropagation(event); showinputbox(divid2); }; – vjunky123 Oct 03 '14 at 18:30

0 Answers0