add text to an asp.net textbox control with jQuery

Question

Within an web form I have a some input fields

<div id="search1">
        <div class="forminput">
            Label 1<br />
            <input type="text" name="Field1" value="" size="20" />
        </div>
        <div class="forminput">
            Label 2<br />
            <input type="text" name="Field2" value="" size="20" />
        </div>
</div>

As focus is lost on the control the value entered needs to be returned to an asp.net textbox control. I have been able to pass the values to a div layer or standard html element using the following code:

    function fieldUpdate() {

            var currentValue = $(this).val();
            var field = $(this).attr("name");

                if (currentValue != "") {
                    $("#results").append(field + ":" + currentValue + "+");
                }
        }
 $(function () {
            $("#search1 :input[type=text]").focusout(fieldUpdate);

        });

However this does not seem to work with an asp.net server side control. Update The objective of this question is to provision the values entered into standard html input fields into an asp:textbox control

<asp:TextBox ID="results2" Text="" Width="400" runat="server" />

Update Below is a screenshot of how the current solution works. At the top you see teh input fields as a user enters a value and tabs out of each field this value is added to a Div layer labeled results. What I want to do is instead of adding the fieldname and value to a DIV element I want them to instead be added to a asp:textbox control.

enter image description here

It is preferred to have this code stored within an external js file vs within the aspx page.

Can anyone provide any suggestions on how to accomplish this?

thanks in advance

Update Solution Thanks to James for helping me work though this. Below is the jQuery code as used in the current implementation.

function fieldUpdate() {

            var currentValue = $(this).val();
            var field = $(this).attr("name");
            var txt = $("#<%=results2.ClientID%>");
                if (currentValue != "") {
                    $("#results").append(field + ":" + currentValue + "+");
                    if (txt) {
                        txt.val(txt.val() + field + ":" + $(this).val() + "+");
                    }
                }
        }


        $(function () {
        //only evaluate input text field
            $("#search1 :input[type=text]").focusout(fieldUpdate);

This will now allow an asp:textbox to be populated with the input field name and value. Example Field1:foo+Field2:somevalue2+Field3:somevalue3 ...

What exactly is the problem: getting the values out the input fields, or setting the values to the ASP.NET Textbox Control? If it is the last, where is the Textbox Control? — Pbirkoff
– Pbirkoff, Commented Nov 10, 2011 at 15:03
@Pbirkoff the issue I am having is I need the ability to provision the values from the html input fields into an asp:textbox control. I have updated the question for clarity — rlcrews
– rlcrews, Commented Nov 10, 2011 at 15:16

James Johnson · Accepted Answer · 2011-11-10 16:13:23Z

12

Those are not ASP.NET TextBox controls; they're HTML text inputs. To answer your question though, you would do this:

<script type="text/javascript">
    $(function(){
        $("#input1").val("Hello world");
    });
</script>
<input type="text" id="input1" />

I noticed that you're setting the name instead of the ID in your example. I would use ID if you have a choice, but you can find an element by name like this:

$("input[name='Field1']").val("Hello world");

If you use an actual ASP.NET TextBox control, the solution will be a little different:

<script type="text/javascript">
    $(function(){
        $("#<%=TextBox1.ClientID%>").val("Hello world");
    });
</script>
<asp:TextBox ID="TextBox1" runat="server" />

If you want to get all of the text inputs in the search1 div, you can do this:

$(".forminput input[type='text']").val("Hello world!");

Here's a jsFiddle for the above example: http://jsfiddle.net/DWYTR/

EDIT

Per your comment, here is how you can copy a value from one input to another on blur:

$(".forminput input[type='text']").blur(function(){
    var txt = $("#<%=TextBox1.ClientID%>");
    if (txt){
        txt.val(txt.val() + $(this).val());
    }
});

edited Nov 10, 2011 at 16:13

answered Nov 10, 2011 at 15:01

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

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

9 Comments

rlcrews Over a year ago

Yes you are correct James. the controls are standard html input controls they need to provision an asp.net control so you are correct I am going from input to asp:textbox. Sorry for not being more clear of that in the question

rlcrews Over a year ago

I used name as I also wanted to append the field name with the value. You suggested using ID over name any reason or just personal preference. thank you

James Johnson Over a year ago

It's up to you, but ID is the norm in most cases.

rlcrews Over a year ago

James I tried your solution but it only adds one value. I need to tab through each field and append the value into the text field. So that it builds a string. (Field1:Value+Field2:value....) I tried using append() but that did not seem to work. Using val only places one value in the text field any suggestions.

James Johnson Over a year ago

Just updated the last example. Noticed that you have a forminput class around the inputs.

|

Collectives™ on Stack Overflow

add text to an asp.net textbox control with jQuery

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related