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.

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 ...

Answer 1

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());
    }
});