Friday, September 20, 2013

Visual Webpart on Text Box Change event Append the Text box data with Check Box list and Drop down Selected Value

Below is the code in which on you type in something on text box and on tab event(On change) event of text box the slected values from Check Box list and drop down is appended with text and displayed in Multiline text box control


In your ascx page use below code


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script type=text/javascript>
    function AutoFill() {
       
        var chkSelectedLang = new Array();
        var i = 0;
        $('#<%=chkList.ClientID %> input[type=checkbox]:checked').map(function () {
         
            chkSelectedLang[i] = this.value;
            i = i + 1;

        });
       
        //var string1 = "";
        //for (var i = 0; i < myLanguage.length; i++) {

        //    string1 += myLanguage[i] + ";";
        //}       
        //alert(string1);       
        //alert(drop);
        var publicationNo = "";
        var materialNo = $("#txtMaterialNo").val();
        var ddlSelectedLang = $("#ddlLang").val();
        publicationNo = materialNo + ddlSelectedLang + ',' + '\n';
        for (var i = 0; i < chkSelectedLang.length; i++) {
            publicationNo += materialNo + chkSelectedLang[i] + ',' + '\n';
        }
        $("#txtMultiLine").val(publicationNo);
    }
</script>




<div style="border:1px solid black">
    <asp:CheckBoxList ID="chkList" runat="server">
        <asp:ListItem Value="I">India</asp:ListItem>
        <asp:ListItem Value="U">USA</asp:ListItem>
        <asp:ListItem Value="E">England</asp:ListItem>
    </asp:CheckBoxList>

</div>

<div style="border:1px solid green">
    <asp:DropDownList ID="ddlLang" ClientIDMode="Static" runat="server">
        <asp:ListItem Value="I">India</asp:ListItem>
        <asp:ListItem Value="U">USA</asp:ListItem>
        <asp:ListItem Value="E">England</asp:ListItem>
    </asp:DropDownList>
</div>

<div style="border:1px solid red">
<span>Material No</span><asp:TextBox ID="txtMaterialNo" ClientIDMode="Static" runat="server" onChange="AutoFill()" ></asp:TextBox>
<asp:TextBox ID="txtMultiLine" ReadOnly="true" ClientIDMode="Static" runat="server" TextMode="MultiLine"></asp:TextBox>   
</div>


Also Find the demo at the below link
Thilosh-Fiddle




No comments:

Post a Comment