Find the parent form of a button inside a List

I have a list of devices with each row containing a delete button. On clicking the delete button, i need to popup a dialog to get the reason for delete and then on OK, submit the parent form with deivce Id. The cshtml looks like

foreach(var device in (Collection<Device>)ViewBag.Devices)
{
<tr>
<td> device.Name </td>
<td> device.Description </td>
<td>
    @using (Html.BeginForm("delete", "Devices", new {id="delete-device-form"}))
                      {
                          <input type="hidden" name="deviceId" id="deviceId" value="@device.Id" />
                          <input type="hidden" name="selectedAssignStatus" id="selectedAssignStatus" value="" />
                          <input type="hidden" name="selectedreason" id="selectedreason" value="" />
                          @Html.HttpMethodOverride(HttpVerbs.Delete)
                          <button type="button" name ="btnDelete" id="btnDelete" value="@device.Id" class="unassign"> Delete</button>

                          <div id="dialog-message" title="Provide a Reason for Unassignment" class="hide">
                              <ul>
                                  <li>
                                      <span>
                                          @Html.DropDownList("DeviceAssignmentStatuses", null, string.Empty, new {style = "width: 250px;"})
                                          @Html.Label("Device Assignment Status")
                                      </span>
                                  </li>
                                  <li>
                                      <span>  
                                      开发者_如何转开发    <label>
                                              Select a reason for unassignment</label>
                                      </span>
                                      <span>
                                          <textarea id="reason" cols="30" rows="3"></textarea>
                                      </span>
                                  </li>
                              </ul>   
                          </div>
                      }
</td>
</tr>
}

My jquery looks like this

$(".unassign").button().click(function () {
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($(this).val());
                var $form = $(this).closest("form"); //not working
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});

I need help finding the correct parent for of the button in the OK: function() ,so that i can get the correct hidden fld value for deviceId on submit. Any help appreciated. Thanks,

---

 var $form = $(this).parents("form"); //this probably will not work too

and the reason its not working is because inside the dialog-box $(this) is not referring to the button, its referring to the dialog-box, try the following

$(".unassign").button().click(function () {
      $btnThis = $(this);
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($(this).val());
                var $form = $btnThis.closest("form"); //not working
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});

---

Sorry for the copy and paste, 3nigma. I would have commented that putting $btnThis as a parameter in the OK: function shadowed the first definition. Try this:

$(".unassign").button().click(function () {
  $btnThis = $(this);
$("#dialog-message").dialog({
    modal: true,
    width: 350,
    buttons: {
        OK: function () {
            alert($(this).val());
            var $form = $btnThis.closest("form"); // works in fiddle
            $form.submit();
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

});

---

$("#DeviceAssignmentStatuses").change(function () {
    $("#selectedAssignStatus").val($(this).val());
});

$("#reason").change(function () {
    $("#selectedreason").val($(this).val());
});

$(".unassign").button().click(function () {
    var btnThis = $(this);
    $("#dialog-message").dialog({
        modal: true,
        width: 350,
        buttons: {
            OK: function () {
                alert($("#selectedAssignStatus").val());
                alert($("#selectedreason").val());
                var $form = $(btnThis).closest("form");
                $($form.find("selectedAssignStatus")).val($("#selectedAssignStatus").val());
                $($form.find("selectedreason")).val($("#selectedreason").val());
                $form.submit();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
});