Question

I have a html element:

<div id="myElement" class="someClass" onclick="setText(this.innerHtml)" runat="server">text</div>

I want to be able to change this element on the client side using some jquery like so:

function setText(text) {            
    $(".someClass").text(text);
}

–OR–

function setAttribute(text) {            
    $(".someClass").attr("myAttr",text);
}

Once I do this I want to grab this element’s new text or new attribute and then store the value of either or, server side. I should note that I then postback to the server using a LinkButton. It is at this time that when I look at the element the default text is still present or the new attribute I added is missing.

Can someone explain why the element does not get updated on the server and how I can get it too?

Answer 1

I believe the problem you are facing is due to the type of html element you are using, a div. If you simply replace the div with an input of type “text”, it will work as you expect it, allowing you to read values on postback. Only form elements are sent during form submission/postback.

An example of this is how web-based WYSIWYG text editors work. You type and edit in a div, but in the background all changes you make are stored in a hidden field. This hidden field is used to post the information back to the server.