javascript - 一页上有多个表单如何知道提交了哪一个表单

Question

我使用以下代码来呈现行。每一行都是一种形式:

foreach (var j in m.List)
{
   using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @class = "myForm" }))
   {
      <input type="hidden" name="userId" value="@j.UserId.ToString()" />
      <input type="hidden" name="jobId" value="@j.JobId.ToString()" />
      <select name="statusId" class="selectField">
         <option value="-1">...
   }
}

当我更改状态时，我会进行 AJAX 调用:

$('select[name="statusId"]').on('change', function () {
                $('.myForm').triggerHandler('submit');
            });
            $(".myForm").on("submit", function (event) {
                event.preventDefault();

                var url = $(this).attr("action");
                var formData = $(this).serialize();

                $.ajax({
                    url: url,
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    }
                });

            });

问题是我在函数中没有获得选定的表单值:

public ActionResult Action(int userId, int statusId, int jobid)

但始终获取页面上第一个渲染表单的值。为什么？

    <tbody>
<form action="/Controller/Action" class="myForm" method="post">                                        <tr>
                                            <td><a href="#">...</a></td>
                                            <td><a href="#">...</a></td>
                                            <td><a href="#">...</a></td>
                                            <td>
                                                <input type="hidden" name="userId" value="2" />
                                                <input type="hidden" name="jobId" value="31" />
                                                <select name="statusId" class="selectField">
                                                    <option value="-1">A</option>
                                                    <option value="1">B</option>
                                                    <option value="2">C</option>
                                                </select>    
                                            </td>
                                        </tr>
</form><form ...

Answer 1

有两个问题。

1. 您总是提交第一份表单(可能是所有表单)。
2. 您的 HTML 无效。 <forms> cannot be inside of a <table> ，因此 jQuery 不会按照您的意愿遍历它。

解决方案

1. 您需要获取要提交的正确表单，即 <select> 的父表单。发生变化的字段。

   使用以下 JavaScript:

   $('select[name="statusId"]').on('change', function () {
       $(this).parents('.myForm').triggerHandler('submit');
   });
   

2. 将表单完全移至表格外部，或切换到使用 <div>和<ul><li> s。 不幸的是，这可能需要您做一些工作来修复，但无效的 HTML 将成为您尝试的所有操作中持续存在的问题。 You can validate you HTML here .

<强> jsFiddle using ul/li

<强> jsFiddle using table inside form