Edit HTML Content

aswinsiddaling2 · ‎11-22-2016

Hi All,

I am trying a logic on one of our UI pages where we have a icon which when clicked will make another HTML element editable. For ex:

UI page:

<table>

<tbody>

<tr>

<td style="padding-right:10px;">Class</td>

</td>

</tr>

</tbody>

</table>

Client Script:

function editName() {

var gotnm = gel("member_name");

gotnm.style.color="red" ;

gotnm.contenteditable="true" ;

}

But when I click on the icon, the Name is colored but it does not become editable

But if I use, contenteditable="true" for the the first <td> it becomes editable everytime. How can I achieve it only on click of the icon and once I edit, I should be able to fetch the old value and the new value.

Please let me know if anyone has any idea. Thanks in advance!

ChrisBurks · ‎11-22-2016

Aswin,

This is where an input element would have been a bit better to work with. However, here is one way of doing it.

<table>

<tbody>

<tr>

<td style="padding-right:10px;">Class</td>

</td>

</tr>

</tbody>

</table>

var gotnm = gel("member_name");

function editName() {

var oldValue = gotnm.innerHTML;

gotnm.style.color="red" ;

gotnm.setAttribute('contenteditable',true );

console.log("oldValue", oldValue);

}

function getNew(){

var newValue = gotnm.innerHTML;

console.log("new Val", newValue);

}

Notice the mouseleave kicking off the "getNew()" function. Also notice how "innerHTML" is used because a "td" element doesn't inheritly have the "value" attribute like an form input

View solution in original post

Ankur Bawiskar · ‎11-22-2016

Hi Aswin,

Try using the readonly = true attribute in case of table td tag.

I have used the same and it worked. readonly = true if you want to make it non-editable and readonly = false if editable

Mark my reply as Correct and also hit Like and Helpful if you find my response worthy.

Thanks

Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

aswinsiddaling2 · ‎11-22-2016

I want the <td> to be editable dynamically. Also it is not a input field to use read-only

ChrisBurks · ‎11-22-2016

Hi Aswin,

I don't think that all attributes of an element are available to set directly through dot walking the DOM.

Change gotnm.contenteditable="true" to this gotnm.setAttribute('contenteditable', true)

aswinsiddaling2 · ‎11-22-2016

Hey Chris,

That worked like I expected. Thank you so much.

But do you have any idea how I can send the oldValue and the new value to my client script?

Thanks again