Question

So I have this update panel and it is working well.

    <div>
        <button id="foo" onclick="changeVal(this.id);">Send the ID "foo"...</button>
    </div>

<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always"> 
<ContentTemplate> 

<div id="thethetext">
<asp:Literal ID="thetext" runat="server"></asp:Literal>
</div>

</ContentTemplate> 
<Triggers>
<asp:AsyncPostBackTrigger ControlID="myButton" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>



   **<!-- MOVE BUTTON (ID="foo") OVER HERE TO DISPLAY IT UNDER THE LITERAL -->**

<asp:HiddenField ID="blah" runat="server" value="Initial Value"></asp:HiddenField>
<asp:Button ID="myButton" Text="Get Concatenated..." OnClick="Test" runat="server"></asp:Button>    
</form>

However, I want to move the button (with id “foo”) inside the asp form. so it displays under the Literal user control… but if I do that, everytime I clicked on it, it reloads the page. Is there anyway to avoid that? thanks!

Answer 1

It reloads the page because your button submits the form that you have just placed it in.
Give your button the attribute type with value button so it won’t submit:

<div>
 <button type="button" id="foo" onclick="changeVal(this.id);">Send the ID "foo"...</button>
</div>

Reference: W3C HTML 4.01 Specification