locked
show data in textbox like my format without postback RRS feed

  • Question

  • User-807418713 posted

    Hello

    This is my aspx page

    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        &nbsp;<asp:Label ID="Label1" runat="server" Text="Enter Data1"></asp:Label>
        <asp:TextBox ID="TextBox3" runat="server" AutoComplete="off"
            Font-Bold="True" Font-Names="Palatino Linotype" Font-Size="16pt" ForeColor="Red"
            Height="24px" TabIndex="3" Width="103px"></asp:TextBox>
        <asp:Label ID="Label2" runat="server" Text="Enter Data 2"></asp:Label>
        <asp:DropDownList ID="DropDoList2" runat="server" AppendDataBoundItems="True"
            CssClass="chzn-select"
            TabIndex="4" Width="210px">
             <asp:ListItem Selected="True">R1</asp:ListItem>
                <asp:ListItem>R2</asp:ListItem>
                  <asp:ListItem>R3</asp:ListItem>
                    
        </asp:DropDownList>
        <asp:Label ID="Label3" runat="server" Text="Enter Data 3"></asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True"
            CssClass="chzn-select" Font-Bold="True" Font-Size="16pt"
            TabIndex="5" Width="182px">
              <asp:ListItem Selected="True">Item1</asp:ListItem>
                <asp:ListItem>Item2</asp:ListItem>
                  <asp:ListItem>Item3</asp:ListItem>
                    <asp:ListItem>Item4</asp:ListItem>
        </asp:DropDownList><br />
        <br />
        <asp:Label ID="Label4" runat="server" Text="Result"></asp:Label>
        <asp:TextBox ID="ResultTextbox" runat="server" AutoComplete="off" AutoPostBack="True"
            Font-Bold="True" Font-Names="Palatino Linotype" Font-Size="16pt" ForeColor="Red"
            Height="24px" TabIndex="3" Width="443px"></asp:TextBox>
    </asp:Content>
    
    

    On load i will enter data in textbox and select from dropdownlist then it should show data without postabck like this below

    Thursday, March 18, 2021 6:56 PM

Answers

  • User-939850651 posted

    Hi Gopi.MCA,

    According to your requirement, I created a simple demo use the code you provided, you could try to use change event in select element and keyup event in input. 

    Something like this:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <script>
            $(function () {
                $('select[id*="DropDoList2"],select[id*="DropDownList1"]').change(function () {
                    var input = $('input[id*="ResultTextbox"]').val();
                    if (input != null && input.trim() != "") {
                        var text = $('input[id*="TextBox3"]').val().trim() + "-" +
                            $('select[id*="DropDoList2"] option:selected').text() + "-" +
                            $('select[id*="DropDownList1"] option:selected').text();
                        $('input[id*="ResultTextbox"]').val(text);
                    } else {
                        $('input[id*="ResultTextbox"]').val('');
                    }
                });
                $('input[id*="TextBox3"]').keyup(function () {
                    if ($(this).val() != null && $(this).val().trim() != "") {
                        var text = $('input[id*="TextBox3"]').val().trim() + "-" +
                            $('select[id*="DropDoList2"] option:selected').text() + "-" +
                            $('select[id*="DropDownList1"] option:selected').text();
                        $('input[id*="ResultTextbox"]').val(text);
                    } else {
                        $('input[id*="ResultTextbox"]').val('');
                    }
                });
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                &nbsp;<asp:Label ID="Label1" runat="server" Text="Enter Data1"></asp:Label>
                <asp:TextBox ID="TextBox3" runat="server" AutoComplete="off"
                    Font-Bold="True" Font-Names="Palatino Linotype" Font-Size="16pt" ForeColor="Red"
                    Height="24px" TabIndex="3" Width="103px"></asp:TextBox>
                <br />
                <asp:Label ID="Label2" runat="server" Text="Enter Data 2"></asp:Label>
                <asp:DropDownList ID="DropDoList2" runat="server" AppendDataBoundItems="True"
                    CssClass="chzn-select" TabIndex="4" Width="210px">
                    <asp:ListItem Selected="True">R1</asp:ListItem>
                    <asp:ListItem>R2</asp:ListItem>
                    <asp:ListItem>R3</asp:ListItem>
                </asp:DropDownList>
                <br />
                <asp:Label ID="Label3" runat="server" Text="Enter Data 3"></asp:Label>
                <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True"
                    CssClass="chzn-select" Font-Bold="True" Font-Size="16pt"
                    TabIndex="5" Width="182px">
                    <asp:ListItem Selected="True">Item1</asp:ListItem>
                    <asp:ListItem>Item2</asp:ListItem>
                    <asp:ListItem>Item3</asp:ListItem>
                    <asp:ListItem>Item4</asp:ListItem>
                </asp:DropDownList><br />
                <br /> <br /> <br /> <br /> <br /> <br />
                <asp:Label ID="Label4" runat="server" Text="Result"></asp:Label>
                <asp:TextBox ID="ResultTextbox" runat="server" AutoComplete="off" AutoPostBack="True"
                    Font-Bold="True" Font-Names="Palatino Linotype" Font-Size="16pt" ForeColor="Red"
                    Height="24px" TabIndex="3" Width="443px"></asp:TextBox>
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 19, 2021 2:55 AM