getItemById javascript error

Question

I'm creating a custom form and am trying to add a button to the form, and have functionality when its clicked.

I don't really have much experience with javascript, so if there is a better approach to this I'm open to suggestions.

So what I have is

<asp:Button runat="server" Text="test" id="Group1" onclientclick="updateText()" />
<script type="text/javascript">
    function updateText() {
             document.getElementById('<%=Group1.ClientID%>').value="updated";
    }
</script>

I've tried both putting this in the form (changing the < and > to < and >) as well as putting it in a content editor webpart (with the asp:Button section remaining on the form, and the script being placed in a .js file). The function calls properly in both instances, but I can't get the getElementById to work-trying an alert with the value also fails.

Answer 1

Try this

<asp:Button UseSubmitBehavior="false"  runat="server" Text="test" 
 id="Group1" onclientclick="updateText(); return false;" />

<script type="text/javascript"> 
    function updateText() {             
             document.getElementById('<%=Group1.ClientID%>').value="updated";
             return false; 
    } 
</script>

Returning false will remove the postback.

<asp:controlname /> type directives won't work in a content editor. In asp or a content editor you can do this with a regular html button instead of an asp control if you want to.

<input type="button" id="btn" value="test" onclick="updateText2();"/>

<script type="text/javascript"> 
    function updateText2() {            
             document.getElementById('btn').value="updated";             
    } 
</script>