TextBox Value on one tab passed to a label on another tab
I have been banging my head trying to figure out how to get this to work. I am creating a form with jQuery UI Tabs. I have 3 tabs: Basic Information, Payment Information, Confirmation.
The first two tabs have textbox's for user to fill out, and the confirmation is just a blank label that should pull the value from the corresponding textbox on tab-1.
Here is some of my code:
I have tried multiple variations below in changing lblConfirmFirst and tbFirstName as well as the .val and .html
- <script>
- $("#btnContinue").click(function () {
- //When your button is clicked send the value in the TextBox to lbl
- $("#lblConfirmFirst").val($("#tbFirstName.").html());
- });
- </script>
- <script>
- //Jquery UI Script to create the tabs, and provide functionality to jump to next tab
- $(document).ready(function () {
- var $tabs = $('#tabs').tabs();
- $(".nexttab").click(function () {
- var selected = $("#tabs").tabs("option", "active");
- $("#tabs").tabs("option", "active", selected + 1);
- });
- });
- </script>
- <div id="tabs">
- <ul>
- <li><a href="#tabs-1">Basic Information</a></li>
- <li><a href="#tabs-2">Payment Information</a></li>
- <li><a href="#tabs-3">Confirmation</a></li>
- </ul>
- <div id="tabs-1">
- <asp:Label runat="server" ID="lblFirstName" Text="First Name" />
- <asp:TextBox runat="server" ID="tbFirstName" ClientIDMode="Static" AutoPostBack="true"/>
- <asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" ClientIDMode="Static" />
- </div>
- <div id=tabs-2">
- </div>
- <div id=tabs-3">
- <asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
- <asp:Label runat="server" ID="lblConfirmFirst" ClientIDMode="Static" />
- </div>
- </div>
The values in the textbox's stay in the textboxes even after navigating between tabs, however I can not get the values to pass to the label on the confirmation page. Any help would be greatly appreciated.