java script code to insert the desired text in a TextBox in Asp.net

Question

I want to use a java script code to insert a desired word in a TextBox when an ImageButton is clicked. The TextBox may have some texts before inserting the desired word. I used the below VB.NET code and it works fine but I want to do it in the client seide. How is it possible? (I am new with java script)

  Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
    Dim emoticsign As String = TextBox2.Text & ":)"
    ScriptManager.RegisterStartupScript(Me.Page, Me.Page.[GetType](), "myScript", "document.getElementById('" + TextBox2.ClientID & "').value = ' " & emoticsign & "';", True)
    SetFocus(TextBox2)
End Sub

Can you share your front-end web form HTML where `ImageButton1` is defined? — zgood, May 02 '16 at 18:04

Steven B. · Accepted Answer · 2016-05-02T20:12:13.983

4

Just target the element by the id and set the value.

Javascript

 function insertText() {
     document.getElementById("Hello").value = "This is inserted";
 }

.aspx

<asp:TextBox runat="server" ID="Hello"></asp:TextBox>
<asp:ImageButton runat="server" Text="Insert" OnClientClick="insertText()" />

If you are wanting to handle text already being in this textbox and just append to it then you could add an if/else, so something like:

 function insertText() {
    var textbox = document.getElementById("Hello")
    if(textbox.value != "") {
        textbox.value = textbox.value + " text appended";
        textbox.focus();
    }
    else {
        textbox.value = "This is inserted";
        textbox.focus();
    }

 }

edited May 02 '16 at 20:12

answered May 02 '16 at 18:04

Steven B.

8,962
3
24
45

2

This looks good. I might add `ClientIDMode="Static"` to the `TextBox` if you are using MasterPages – zgood May 02 '16 at 18:06
It works. Thanks. A question, doesn't it run on the client side when we click on the ImageButton? What is the difference between this one and my written code? – Javad-M May 02 '16 at 18:19
@user1605859 Your code is running server side on postback when you click the `Imagebutton`, this code runs the client-side javascript first but still may postback. To prevent this unneeded postback you can update your `OnClientClick` to this: `OnClientClick="insertText(); return false;"` – zgood May 02 '16 at 18:33
Too add to what @zgood said, if you do not need to access this information later from the back end then you could just use plain HTML controls like `` and `` which would also not cause a postback. – Steven B. May 02 '16 at 18:36
How may I do the last part of my code by using java script code, I mean: `SetFocus(TextBox2)` i used `document.getElementById("Textbox1").focus();` but does not work. – Javad-M May 02 '16 at 20:06
`.focus()` is the correct way to do it. There must be another issue then. – Steven B. May 02 '16 at 20:17

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Set Value of Input Using Javascript Function

// this can all be in one line, but expanded for clarity
var appendValue = 'appended text in here';
var inputElement = document.getElementById('input_element_id');
var updatedInputValue = inputElement.value + ' ' + appendValue;
inputElement .value = updatedInputValue;

edited May 23 '17 at 12:31

Community

1
1

answered May 02 '16 at 18:06

Nathan Hase

649
4
11

score 0 · Answer 3 · answered May 02 '16 at 18:15

You can also try something like this.

<script type="text/javascript">
    $(document).ready(function () {
        $("#YourTextBoxID").click(function () {
            var txtBox = document.getElementById('YourTextBoxID');
            var emoticsign = txtBox.value + ":)";
            txtBox.value = emoticsign;
        })
    });
</script>

java script code to insert the desired text in a TextBox in Asp.net

3 Answers3