Change text on html button with class

Question

I have a button that i use to call code behind in my aspx file. I am trying to change the text on the button to no avail.

HTML:

<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click"               >Execute SQL</button>

Here is the javascript:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%--<asp:ScriptManager ID="scripman1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>--%>
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>

<style >
    @import "css/datatables/demo_page.css";
    @import "css/datatables/demo_table.css";
     @import "Table Sorter/style.css";

</style>
<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
            $("#buttonUpload").text('Save');
        });

I have tried $("#buttonUpload").html('Save'). Nothing seems to work.

Does the element exist in the DOM at the time the code is running? — pmandell, Nov 04 '14 at 16:05
Put a debugger; in that script and see if the button exists when it is called. If it doesn't exist it's just a timing issue. — GSaunders, Nov 04 '14 at 16:07
You have it correct with `.html('Save')`. Something else must be amiss. http://jsfiddle.net/vmc8hwrj/ — Joel Etherton, Nov 04 '14 at 16:10
I'm also using foundation so I'm not sure if that has anything to do with it. I have tried debugging and it seems to go through the code just fine but the button never changes. — techmakin, Nov 04 '14 at 16:32

score 1 · Answer 1 · answered Nov 04 '14 at 16:10

1

Wait until the DOM has been loaded first (and jQuery). .text() and .html() will both work.

$(document).ready(function() {
  $("#buttonUpload").text('Save');
});

answered Nov 04 '14 at 16:10

Shawn Erquhart

1,820
2
17
30

score 0 · Accepted Answer · answered Nov 04 '14 at 18:36

0

I found out the problem was the runat"server" property

<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click"               >Execute SQL</button>

When you remove that the button's text updates fine.

answered Nov 04 '14 at 18:36

techmakin

73
1
9

1

That is not really a "problem" - it seems maybe you don't understand exactly what is going on. For server-side access in webforms you'll need that, but if you aren't accessing the button server-side then you don't. The likely **problem** is that the id that you specify isn't necessarily the id a webforms control gets when rendered. For info on how to specify a client ID for a server control check this answer: http://stackoverflow.com/a/3304494/189937 – Tim Hobbs Nov 04 '14 at 18:41
Thank you for clarifying that, I decided to get with – techmakin Nov 04 '14 at 19:03

Change text on html button with class

2 Answers2