Question

我有一个表格，允许用户从项目列表中进行选择：

<form action="submitSelection.php" method="post" role="form">

  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="PR7518">
        <td>1234A</td>
        <td>Option A</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR7636">
        <td>45678B</td>
        <td>Option B</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR9149">
        <td>9988C</td>
        <td>Option C</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR9187">
        <td>4455D</td>
        <td>Option D</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="text-center">
    <button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>
  </div>

</form>

当他们点击表格行上的“选择”按钮时，我想存储ID - 我只需要跟踪他们最后的选择。我需要这个值在他们做出选择后继续存在，所以它需要存储在某种全局变量中（仍然在学习Javascript，所以不要100％熟悉这里的正确术语）。我需要在提交表单时在隐藏表单输入字段中传递选定的ID。

然后我想验证他们确实做了一个选择，确保全局变量在单击Submit按钮时存在，如果没有显示隐藏警报（我正在使用Bootstrap主题）。

我已经获得了脚本以获取所选ID，我可以在控制台中记录它，但不确定如何在用户打开页面并单击“提交”按钮之前将其存储在某处，以及还会在单击“提交”时验证它是否已被选中。

这是我的剧本：

$(document).ready(function() {
      $('button.btn-success').click(function() {
        // Remove the classes from all of the TR elements
        $(this).parents('table').find('tr').removeClass('success warning danger');
        var productID = $(this).closest('tr').attr('id');
        console.log(productID);
      });

Answer 1

以下代码可以帮助您。

var latest_id = null;
$(document).ready(function(){
  $(".btn.btn-sm").click(function(event){
    latest_id = $(this).parents('tr').attr('id');
  });
  $(".btn.btn-success[name=buttonType]").click(function(event){
    alert(latest_id);
    event.preventDefault();
  });
});

以下是演示https://jsbin.com/puyajomipi/edit?html,js,output

Answer 2

这里添加了一个隐藏字段，单击选择按钮将最新值分配给隐藏字段，然后单击提交按钮检查隐藏字段是否包含任何值。如果没有值，则阻止提交按钮单击。

$(document).ready(function() {
      $('button[type=button]').click(function() {
        
        $(this).parents('table').find('tr').removeClass('success warning danger');
        var productID = $(this).closest('tr').attr('id');
        //console.log(productID);
        $('#hdOptionId').val(productID); //add product id value to hidden field
        console.log($('#hdOptionId').val()); //check updated value of hidden field
      });
  
      $("button[type=submit]").click(function(e){
          if($('#hdOptionId').val() ==="") {
              console.log('false');
              e.preventDefault();
              return false;
          }
          else {
              console.log('true');
              return true;
          }
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="submitSelection.php" method="post" role="form">

  <table class="table table-condensed table-striped table-bordered">
    <thead>
      <th scope="col">Code</th>
      <th scope="col">Description</th>
      <th class="text-center" scope="col">Select</th>
    </thead>
    <tbody>

      <tr class="" id="PR7518">
        <td>1234A</td>
        <td>Option A</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR7636">
        <td>45678B</td>
        <td>Option B</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR9149">
        <td>9988C</td>
        <td>Option C</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
      <tr class="" id="PR9187">
        <td>4455D</td>
        <td>Option D</td>
        <td class="text-center">
          <button type="button" class="btn btn-success btn-sm">Select</button>
        </td>
      </tr>
    </tbody>
  </table>
  <!--Add hidden field-->
<input type="hidden" id="hdOptionId"  value="" />
  <div class="text-center">
    <button type="submit" name="buttonType" value="saveSelected" class="btn btn-success">Submit</button>
  </div>

</form>

存储表单选择并作为隐藏表单字段传递

2 个答案: