You must Sign In to post a response.
  • Category: JavaScript

    Binding the dropdownlist and adding a new value in the text box

    I have a dropdown list and had binded the values from database.
    Now i have a value in the dropdown "Other". When i click the "other", it should enable a textbox and when i type the value in the textbox,it should bind back to the dropdown list.

    How to do using Jquery or javascript ?
  • #754684
    Hi,

    If you want to disable and enable textbox based on dropdown selection then use below sample jquery.


    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
    if ($("#<%=ddl.ClientID %> option:selected").text() == 'Other')
    {
    $("#<%=txt1.ClientID %>").Show();
    }
    Else
    {
    $("#<%=txt1.ClientID %>").hide();

    }
    $("#<%=ddl.ClientID %>").change(function () {
    if ($("#<%=ddl.ClientID %> option:selected").text() == 'Other')
    {
    $("#<%=txt1.ClientID %>").Show();
    }
    Else
    {
    $("#<%=txt1.ClientID %>").hide();

    }

    });
    });
    </script>




    and if you want to display the textbox entry into dropdown you should save that into the specified table. Then automatically it will display into dropdownlist.

    Hope this will helpful to you...

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #754686
    Should we use text box as html text box or asp text box?

  • #754687
    Hi Pradeep,

    You just try by using both, In my scenario I used asp TextBox. I don't know exactly whether it is worked for html or not.

    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #754688
    Hi,

    As per ur requirement u use below code, hope it will work for uu:
    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
    $("#<%=ddl.ClientID %>").change(function () {
    if ($("#<%=ddl.ClientID %> option:selected").text() == 'Other')
    {
    $("#<%=txt1.ClientID %>").Show();

    if($("#<%=txt1.ClientID %>").text!='')
    {
    var txtvalue=$("#<%=txt1.ClientID %>").val();
    $("#<%=ddl.ClientID %> option:selected").text() = txtvalue;
    }
    }

    });

    </script>
    here after taking the value from textbox then bind to the dropdownlist.
    here as i used id.clintId. so u should use the textbox as serverside controls, that means u set as Runat="Sever" of txtbox and dropdownlist
    Thanks,
    Chitaranjan

  • #754689
    Should we use text box as html text box or asp text box?

  • #754690
    Hi,
    Use asp Textbos as well as Dropdownlist also..



    Thanks,
    chitarnjan

  • #754691
    Should we use text box as html text box or asp text box?

  • #754696
    What's your exact query explain it clearly.?
    --------------------------------------------------------------------------------
    Give respect to your work, Instead of trying to impress your boss.

    N@veen
    Blog : http://naveens-dotnet.blogspot.in/

  • #754714
    hi naveensanagasetti,

    I have a dropdown list and had binded the values from database.

    public partial class WebForm4 : System.Web.UI.Page
    {

    SqlConnection con = new SqlConnection("Data Source=CIS-MAS4;Initial Catalog=Emp;User ID=sa;Password=Caliber@1");
    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    binddata();
    }

    }

    protected void binddata()
    {
    con.Open();
    SqlCommand cmd = new SqlCommand("select Name from Employee ",con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataSet ds = new DataSet();
    da.Fill(ds);
    ddlemp.DataSource = ds;
    ddlemp.DataTextField = "Name";
    ddlemp.DataBind();
    con.Close();
    }
    }

    Now i have a value in the dropdownlist "Other". When i click the "other", it should enable a textbox and when i type the value in the textbox,it should bind back to the dropdown list.

    How to do using Jquery or javascript ?

  • #764071
    Hi..

    Please refer following code snippet:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript">

    function DisableTxtBox()
    {
    document.getElementById("txtDemo").disabled = true;
    }

    function EnableTxtBox()
    {
    if (document.getElementById("ddlDemo").value == "Other") {
    document.getElementById("txtDemo").disabled = false;
    }
    }


    function FillDDL()
    {
    var ddl = document.getElementById("ddlDemo");
    var txtValue = document.getElementById("txtDemo").value
    ddl.options[ddl.options.length] = new Option(txtValue, txtValue);
    }


    </script>
    </head>
    <body onload="javascript:return DisableTxtBox();">
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList ID="ddlDemo" runat="server" onchange="javascript:return EnableTxtBox();">
    <asp:ListItem Text="Other"></asp:ListItem>
    <asp:ListItem Text="abc"></asp:ListItem>
    <asp:ListItem Text="xyz"></asp:ListItem>
    </asp:DropDownList>
    <asp:TextBox runat="server" ID="txtDemo" onblur="javascript:return FillDDL();" />
    </div>
    </form>
    </body>
    </html>


    Hope this will help you.

    Regards,
    Shashikant Gurav[Programmer II]
    shashikantgurav22@gmail.com


  • Sign In to post your comments