fill text in textbox by dropdown only when clicking on button

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • polluxsoftech
    New Member
    • Jun 2010
    • 2

    #1

    fill text in textbox by dropdown only when clicking on button

    i want to enter text in textbox by dropdown only when clicking on button
    i want that all this perform at client side by javascript..
    this is dont in apsx page but i want it in .ascx

    this is following code that i used in aspx page and successfully run as i want:

    Code:
    <script type="text/javascript">
    
            function insertToken(element) 
        {
                var ivxtoken = document.getElementById('DropDownList1').options[document.getElementById('DropDownList1').selectedIndex].value;
                
                var element_v = document.getElementsByName(element)[0];
                
                if (document.selection) {
                    element_v.focus();
                    sel = document.selection.createRange();
                    sel.text = ivxtoken;
                    return;
                } if (element_v.selectionStart || element_v.selectionStart == "0") {
                    var t_start = element_v.selectionStart;
                    var t_end = element_v.selectionEnd;
                    var val_start = element_v.value.substring(0, t_start);
                    var val_end = element_v.value.substring(t_end, element_v.value.length);
                    element_v.value = val_start + ivxtoken + val_end;
                } else {
                    element_v.value += ivxtoken;
                }
            }                     
        </script>
    
    <table style="width:100%;" width="%">
                <tr>
                    <td class="style1" width="20%">
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
                            <asp:ListItem>veera</asp:ListItem>
                            <asp:ListItem>jethva</asp:ListItem>
                            <asp:ListItem>pollux</asp:ListItem>
                            <asp:ListItem>ahmedabad</asp:ListItem>
                            <asp:ListItem>gujrat</asp:ListItem>
                            <asp:ListItem>India</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td class="style1" width="30%">
                         <input id="Button2" type="button" value="Inser Value" onclick="insertToken('TextBox1');" />
                    </td>
                    <td class="style1">
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:TextBox ID="TextBox1" runat="server" Height="91px" TextMode="MultiLine" 
                            Width="280px"></asp:TextBox>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
    but i dont know how to make it work in .ascx
    please solve it ..
    Last edited by Niheel; Jun 29 '10, 05:40 AM. Reason: please use code tags to display code
  • ThatThatGuy
    Recognized Expert Contributor
    • Jul 2009
    • 453

    #2
    Originally posted by polluxsoftech
    i want to enter text in textbox by dropdown only when clicking on button
    i want that all this perform at client side by javascript..
    this is dont in apsx page but i want it in .ascx

    this is following code that i used in aspx page and successfully run as i want:

    Code:
    <script type="text/javascript">
    
            function insertToken(element) 
        {
                var ivxtoken = document.getElementById('DropDownList1').options[document.getElementById('DropDownList1').selectedIndex].value;
                
                var element_v = document.getElementsByName(element)[0];
                
                if (document.selection) {
                    element_v.focus();
                    sel = document.selection.createRange();
                    sel.text = ivxtoken;
                    return;
                } if (element_v.selectionStart || element_v.selectionStart == "0") {
                    var t_start = element_v.selectionStart;
                    var t_end = element_v.selectionEnd;
                    var val_start = element_v.value.substring(0, t_start);
                    var val_end = element_v.value.substring(t_end, element_v.value.length);
                    element_v.value = val_start + ivxtoken + val_end;
                } else {
                    element_v.value += ivxtoken;
                }
            }                     
        </script>
    
    <table style="width:100%;" width="%">
                <tr>
                    <td class="style1" width="20%">
                        <asp:DropDownList ID="DropDownList1" runat="server" Width="150px">
                            <asp:ListItem>veera</asp:ListItem>
                            <asp:ListItem>jethva</asp:ListItem>
                            <asp:ListItem>pollux</asp:ListItem>
                            <asp:ListItem>ahmedabad</asp:ListItem>
                            <asp:ListItem>gujrat</asp:ListItem>
                            <asp:ListItem>India</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td class="style1" width="30%">
                         <input id="Button2" type="button" value="Inser Value" onclick="insertToken('TextBox1');" />
                    </td>
                    <td class="style1">
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td>
                        &nbsp;</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:TextBox ID="TextBox1" runat="server" Height="91px" TextMode="MultiLine" 
                            Width="280px"></asp:TextBox>
                    </td>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
    but i dont know how to make it work in .ascx
    please solve it ..
    you can paste the same in ascx markup page...

    Comment

    • Frinavale
      Recognized Expert Expert
      • Oct 2006
      • 9749

      #3
      The unique ID given to the DropDownList1 when it's rendered as a <select> HTML element in the browser is not "DropDownList1" . It's something else. You need to provide the correct ID in order for the document.getEle mentById() method to work. To do this you need to provide the DroDownList1's ClientID to the getElementById( ) method.

      If your JavaScript is in your ASCX page source code, instead of having:
      var ivxtoken = document.getEle mentById('DropD ownList1').opti ons[document.getEle mentById('DropD ownList1').sele ctedIndex].value;

      You need to provide the ClientID property of DropDownList1.. .like this:
      Code:
       var ivxtoken = document.getElementById('<%=DropDownList1.ClientID%>').options[document.getElementById('<%=DropDownList1.ClientID%>').selectedIndex].value;
      If the JavaScript is not located in the ASCX page then it would be best to modify your method to accept the DropDownList1's Client ID and provide it to your JavaScript when you add a reference for an in your C#/VB.NET server-side code.

      For example, you'd change your JavaScript function's signature to something like this:
      Code:
      function insertToken(element, ddlClientID)
      And then change your document.getEle mentID to use the "ddlClientI D" parameter:
      Code:
       var ivxtoken = document.getElementById(ddlClientID).options[document.getElementById(ddlClientID).selectedIndex].value;
      But you'd need to change your server-side code that adds the call this this method to something like:

      Code:
      Button1.Attributes.Add("onclick","insertToken(this,'"+DropDownList1.ClientID+"'); return false")
      -Frinny

      Comment

      Working...