GeekyNuns GeekyNuns - 4 months ago 23
jQuery Question

Setting text to text box on click

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

Picture :
enter image description here

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

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:

Button click event in MVC WebGrid