Send dynamic textbox element id to child window when clicking a link

Question

I have a textbox called "Branch Code" which ties a branch to a corporate card transaction. Sometimes there is a need to split a transaction among several branches. I have a table being built dynamically in MVC containing the form that needs filled out. In the branch code table cell, I'm adding a href that will fire off the splitTransaction javascript function that opens a new window allowing a value to be built. This new value needs to be written back to the parent window into the textbox that was right next to the hyperlink that opened the child window. My problem is, how do I send the name of the textbox to the child window? I'm not sure how to get it.

Here is my view:

@model List<intranetMVC.Models.sp_CorpCardEmpGetTrans_Result>

@{
ViewBag.Title = "Index";
}

<h2>Corporate Card Transactions</h2>

@using (@Html.BeginForm("Index", "CorpCardTransactions", FormMethod.Post))
{
    <table cellpadding="8">
        <tr>
            <th class="col-md-2">Transaction Details</th>
            <th class="col-md-2">Payee</th>
            <th>Amount</th>
            <th class="col-md-2">Description</th>
            <th class="col-md-1">GL/Account</th>
            <th class="col-md-1">Branch Code</th>
            <th class="col-md-1">Receipt</th>
        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td valign="top">
                    @Html.HiddenFor(m => m[i].ID)
                    @*@Html.DisplayFor(m => m[i].AccountID)
                    @Html.HiddenFor(m => m[i].AccountID)<br />
                    <em>@Html.DisplayFor(m => m[i].CardHolderName)</em>
                    @Html.HiddenFor(m => m[i].CardHolderName)<br />*@
                    Posted: @Html.DisplayFor(m => m[i].PostDate)
                    @Html.HiddenFor(m => m[i].PostDate)<br />
                    TranDate: @Html.DisplayFor(m => m[i].TranDate)
                    @Html.HiddenFor(m => m[i].TranDate)
                </td>
                <td valign="top">
                    @Html.DisplayFor(m => m[i].Payee)
                    @Html.HiddenFor(m => m[i].Payee)
                </td>
                <td valign="top">
                    @Html.DisplayFor(m => m[i].Amount)
                    @Html.HiddenFor(m => m[i].Amount)
                </td>
                <td valign="top">@Html.EditorFor(m => m[i].Description)</td>
                <td valign="top">@Html.EditorFor(m => m[i].GL_Account)</td>
                <td valign="top">
                    @Html.EditorFor(m => m[i].BranchCode)<br />
                    <a href="#" onclick="splitTransaction();">Split Transaction</a> 
            </td>
                <td valign="top">@Html.EditorFor(m => m[i].Receipt)</td>
            </tr>
        }            
    </table>
    <br />
<input type="submit" name="saveBtn" id="saveBtn" value="Save Progress" style="font-size:1.2em;font-weight:bold;width:200px;" /> <input type="submit" name="finishBtn" id="finishBtn" value="Finish and Close Statement" style="font-size:1.2em;font-weight:bold;width:250px;" /> @Html.ActionLink("Cancel", "Index", "Statements")
<p style="margin-top:1em;"><span style="color:green; font-size:14px;">@ViewBag.Message</span> <span style ="color:#b94a48; font-size:14px;font-weight:bold;">@ViewBag.Error</span></p>

<script type="text/javascript">
var popup;
function splitTransaction() {
    popup = window.open("splittrans.htm", "Popup", "width=400,height=200");
    popup.focus();
}
</script>
}

Here is what the page source looks like for one of the branch code table cells:

<td valign="top">
                    <input class="k-textbox" data-val="true" data-val-number="The field     BranchCode must be a number." id="_0__BranchCode" name="[0].BranchCode" value="11" /><br />
                    <a href="#" onclick="splitTransaction();">Split Transaction</a> 
            </td>

When I click on the link to "split transaction", how do I send the value of the textbox next to it to the function that opens the child window? Or how do I reference this textbox when sending the new value back to the parent window? There could be many of them on the page. It appears as if they are being named like this: _0__BranchCode, etc.

Answer 1

It would be better to handle the click event rather that using the onclick attribute

<a href="#" class="split">Split Transaction</a>

and the script

$('.split).click(function() {
  // get the adjacent (sibling) textbox value
  var value = $(this).siblings().first().val();
  // do something with the value
});

or you could use $(this).prev('.k-textbox').val() or $(this).closest('td').children('input').val();