Setting text to text box on click

Question

I cant get the idea, how do I set text to text box on button click. This is my markup :

Picture :

Markup:

 <div id="deploymentsGrid">
    @if (db.CatalogCircumstances.Any())

    {
        @grid.GetHtml(
        tableStyle: "table",
        headerStyle: "table_HeaderStyle",
        footerStyle: "table_PagerStyle",
        rowStyle: "table_RowStyle",
        alternatingRowStyle: "table_AlternatingRowStyle",
        selectedRowStyle: "table_SelectedRowStyle",
        columns: grid.Columns(

            grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                @{ row = row + 1;} @item.Nr
            </text>, style: "p13"),

            grid.Column("Description", @Resources.Localization.description, format: @<text>
                        @{ row = row + 1;} @item.Description
            </text>, style: "width:250px"),


            grid.Column("", "", format: @<text>
                                <input id="select_bttn" style="width:78px" type="submit" value=@Resources.Localization.select />
            </text>)
                )
            )
    }
    <br />
</div>




<div class="container">
    @using (Html.BeginForm("AddCircumstanceToList", "Health", FormMethod.Post))
    {
        @Html.HiddenFor(m => m.EmployeeId)

        @Html.TextBoxFor(m => m.Nr, Model.Nr, new { style = "width:100px" })
        @Html.TextBoxFor(m => m.Description, Model.Description, new { style = "width:450px" })
        <br />
            <br />
            @Html.LabelFor(m => m.Start_date)
            @Html.TextBoxFor(m => m.Start_date, new { id = "datepicker5" })
            @Html.LabelFor(m => m.End_date)
            @Html.TextBoxFor(m => m.End_date, new { id = "datepicker4" })

            <br /><br />
            <input type="submit" value="@Resources.Localization.save" style="width:78px" />
    }
    <button id="closer">@Resources.Localization.back</button>
</div>

And i`d like when clicking on 'select-bttn' text was set to textboxes(inside beginform) and then posted to an action on save button click.

Answer 1

Firstly replace your select_bttn with this:

<input id="select_bttn" class="select_bttn" style="width:78px" type="button" value="OK" data-nr="@item.Nr" data-description="@item.Description" />

Secondly add a jQuery function which will get the Nr and Description properties of the clicked row and set the values of the two textboxes:

$(function () {
    $(".select_bttn").click(function () {
        var nr = $(this).data('nr');
        var description = $(this).data('description');

        var message = "You clicked on.Nr - " + nr + ".Description - " + description + ".";
        alert(message);

        $("#Nr").val(nr);
        $("#Description").val(description);
    });
});

Output:

Answer 2

1 Add id to your Form

@using (Html.BeginForm(     
         "AddCircumstanceToList", "Health", FormMethod.Post, 
         new { id = "myForm" }))}

2 Add this jquery

$( "#select_bttn" ).click(function() { 
    $("#Description").val("hello world");
    $("#myForm").submit();
});