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
– zgood, Commented May 2, 2016 at 18:04

Steven B. · Accepted Answer · 2016-05-02 20:12:13Z

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 2, 2016 at 20:12

answered May 2, 2016 at 18:04

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

zgood Over a year ago

This looks good. I might add ClientIDMode="Static" to the TextBox if you are using MasterPages

Javad-M Over a year ago

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?

zgood Over a year ago

@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;"

Steven B. Over a year ago

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 <input type="text" id="Hello"> and <input type="button" onclick="insertText" value="Insert"> which would also not cause a postback.

Javad-M Over a year ago

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.

|

Community · Accepted Answer · 2017-05-23 12:31:44Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered May 2, 2016 at 18:06

Nathan Hase

6594 silver badges11 bronze badges

Comments

ShawnOrr · Accepted Answer · 2016-05-02 18:15:01Z

0

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>

answered May 2, 2016 at 18:15

ShawnOrr

1,4491 gold badge13 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related