Enable button and change label's text clientside

Hardus Lombaard

When I click button 1, button 2 must be enabled and the label's text must change from "hello" to "bye". This must be done clientside through Javascript. How must I change the following code to get this to work? When I click button 1 the label's text changes but immediately reverts back to it's original value.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript">
function Hello() {
document.getElementById('Button2').disabled = false;
document.getElementById('Label1').innerText = "bye";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Hello()"/>
<br />
<asp:Button ID="Button2" runat="server" Enabled="False" Text="Button" />
<br />
<asp:Label runat="server" ID="Label1" Text="hello"></asp:Label>
</div>
</form>
</body>
</html>

Not Active

When you click the button the client-side script is being executed properly, however, it also causes a post-back which resets the page. If all you need to do execute client-side script with no post-back then change the asp:button controls to simple html elements <input type=button>

I know the language. I've read a book. - _Madmatt

Ankur m

Or just put a

return false;

in the Hello function. That should also work.

..Go Green..

michaelschmitt

Only if he includes the "return.." part in the OnClientClick also. Like:

<script type="text/javascript">
    function Hello() {
        document.getElementById('Button2').disabled = false;
        document.getElementById('Label1').innerText = "bye";
        return false;       
    }    </script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return Hello()" />
<br />
<asp:Button ID="Button2" runat="server" Enabled="False" Text="Button" />
<br />
<asp:Label runat="server" ID="Label1" Text="hello"></asp:Label>
</div>
</form>
</body>
</html>

Hardus Lombaard

Could you perhaps explain the purpose of these return statements?

T M Gray

Returning a value in a javascript click event handler tells the browser whether or not to continue normal processing of that click. For a submit button, returning false tells it to stop processing a not to actually submit the form. Returning true allows it to continue submitting the form normally. For a hyperlink returning true would allow the browser to navigate to the URL and returning false would leave the user on the curernt page.

Ankur m

Yes. And that's what I said. His Hello() function is called on OnClientClick. I missed the return in OnClientClick part. I am sorry I didn't explain it.

..Go Green..

raju melveetilpurayil

return statement is to avoid PostBack. "When I click button 1 the label's text changes but immediately reverts back to it's original value." this is because of PostBack

Raju.M