Get edited cell value from table cell

Question

I am displaying a table using php on an html page. I want to edit the cell contents (basically make changes to a value, and make ajax call to update the database). The requirement for me is to use an onblur function (I can get around with using onkeypress as well). Can anyone please tell me what would be the simplest way of getting the new value entered with the cell id?

The alert for x tells me its "object HTMLTableCellElement"

Thanks!!!

foreach($_RESPONSE['VENDOR_LIST'] as $r){
     echo  "<tr><td>".$r['fdEmail']."</td><td id='companyname_".$r['fdId']."' contenteditable='true' onblur='updateValue(id)';>".$r['fdCompanyName']." ".$r['fdId']."</td></tr>";
}

Javascript method

function updateValue(thisdata){
        alert(""+thisdata);
    var x=document.getElementById(""+thisdata);
    if(x){
        alert(x);
        //var r = x.value;
    }
    else
            alert("not found");

}

Answer 1

In your HTML, change updateValue(id) to updateValue(this.id);

Then put this inside your first if statement in the updateValue function.

if(x.innerText){
    alert(x.innerText);
} else {
    // Firefox support
    alert(x.textContent);
}

Answer 2

The "value" of a table cell is not actually considered a value by javascript, it's just HTML. Try alerting x.innerText. See this question for obtaining cell contents by ID.

Also, I know everyone hates hearing this, but this would be much easier with jQuery.

Answer 3

In your code

var x=document.getElementById(""+thisdata);

Here x is an object, you need to write the required function to change the values or to get the values.

alert(x.innerHTML);

will give you the value of the cell.

Id mentioned in HTML td tag and the id in your getElementById deos not match. (Use error console in your browser to get the javascript errors)

You may have to change your function like this

function updateValue(thisdata){
    var x=document.getElementById("companyname_"+thisdata);
    if(x){
        alert(x.innerHTML);
    }
    else
            alert("not found");

}

Your HTML code to :

foreach($_RESPONSE['VENDOR_LIST'] as $r){
     echo  "<tr><td>".$r['fdEmail']."</td>
                <td id='companyname_".$r['fdId']."' contenteditable='true' onblur="updateValue('companyname_".$r['fdId']."');">".$r['fdCompanyName']." ".$r['fdId']."</td></tr>";
}

NOTE : I have not tested the code please make changes accordingly, Post here if you find it difficult :)

ALWAYS USE jQuery, It makes your task simple :)