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

Store Form Selection and pass as hidden form field

本文关键字：表单 字段 隐藏 选择 存储      更新时间：2023-09-26

我有一个允许用户从项目列表中进行选择的表:

<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。

我想验证他们确实做了一个选择，确保全局变量存在，当他们点击提交按钮，如果没有显示一个隐藏的警报(我使用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);
      });

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

$(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>

下面的代码会对你有所帮助。

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

相关文章：