存儲格式的選擇，並通過作爲隱藏的表單字段

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。

然後，我想驗證他們確實已經做出選擇，確保全局變量存在，當他們點擊提交按鈕，並且如果不顯示隱藏的警報（我使用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

這裏添加了一個隱藏字段和選擇按鈕的點擊指定最新值的隱藏字段，如果隱藏字段包含任何值或不上。之後提交按鈕檢查的點擊。如果沒有值，則阻止提交按鈕單擊。

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

Answer 2

下面的代碼會幫助你。

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