javascript - 如果使用 javascript 提交表单，则发布错误的值

Question

我有一个表，其中包含不同的项目和每个项目的 ID。每个项目都有一个下拉菜单来删除/编辑/启动它。我的问题是，只有第一个 item-id 被传递到我的每个 $post['item_id']。

$(document).ready(function() {

$('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        $('#options').submit();
});


$("#options").submit(function() {
    if (confirm('proceed?')){
        return true;
    } else {
        return false;
    }
});
});

 <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
      <input type="hidden" name="item_id" value="{items.ID}">
      <input type="hidden" name="action" id="opt" value="">

      <li class="dropdown-opt"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
        <ul id="selector" class="dropdown-opt" role="menu">
          <li data-value="edit"><a href="#">Edit</a></li>
          <li data-value="start"><a href="#">Start</a></li>
          <li data-value="delete"><a href="#">Delete</a></li>
        </ul>
      </li>
      </form>
    </td>
  </tr>
  <!-- END items -->

此时我的第一个 ID 是 116，如果我单击“编辑”，我会在每个项目上获得 POST-ID 116。但为什么？我有

 <input type="hidden" name="item_id" value="{items.ID}">

每个项目都不能有相同的 ID。

编辑:将 id='item_id' 添加到隐藏输入并更新 javascript 后，它现在可以工作了。

 <input type="hidden" name="item_id" id="item_id" value="{items.ID}">

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
}); 

唯一不起作用的是这一行

 $(this).closest('tr').find('input#opt').val($(this).data('value'));

在此 Javascript 函数中

 $('.dropdown-opt li').click(function() {
        document.getElementById('opt').value = $(this).closest('tr').find('input#opt').val($(this).data('value'));
        document.getElementById('item_id').value = $(this).closest('tr').find('input[name=item_id]').val();
        $('#options').submit();
});

但据我所知，这不会带来任何问题。非常非常感谢TechBreak!!!

Answer 1

您需要首先找到 li 元素的最接近 tr，然后在相应的input中设置值> 将 id 作为 opt 并获取所需的项目 id

    $('.dropdown-opt li').click(function() {
            $(this).closest('tr').find('input#opt').val($(this).data('value'));
            alert($(this).closest('tr').find('input[name=item_id]').val());
            $('#options').submit();
    });

检查这个工作演示

$(document).ready(function() {
  $('.dropdown-opt li').click(function() {
    $(this).closest('tr').find('input#opt').val($(this).data('value'));
    alert($(this).closest('tr').find('input[name=item_id]').val());
    
  });
  $("#options").submit(function() {
    if (confirm('proceed?')) {
      return true;
    } else {
      return
      false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>

  <!-- BEGIN items -->
  <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="115">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
    <tr>
    <td align="center">
      <form name="" action="" method="post" id="options">
        <input type="hidden" name="item_id" value="116">
        <input type="text" name="action" id="opt" value="">

        <li class="dropdown-opt">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Optionen<span class="caret"></span></a>
          <ul id="selector" class="dropdown-opt" role="menu">
            <li data-value="edit"><a href="#">Edit</a>
            </li>
            <li data-value="start"><a href="#">Start</a>
            </li>
            <li data-value="delete"><a href="#">Delete</a>
            </li>
          </ul>
        </li>
      </form>
    </td>
  </tr>
</table>
<!-- END items -->