user982124 user982124 - 1 month ago 11
HTML Question

Store Form Selection and pass as hidden form field

I have a table that allows users to make a selection from a list of items:



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





When they click the 'Select' button on a table row I would like to store the ID - I only need to track the last selection they made. I need this value to persist after they have made a selection, so it needs to be stored in some kind of global variable (still learning Javascript so not 100% familiar with the correct terminology here). I'll need to pass the selected ID in a hidden form input field when they submit the form.

I would then like to validate that they have indeed made a selection by making sure the global variable exists when they click the Submit button, and if not show a hidden alert (I'm using the Bootstrap theme).

I've got the script to the point where it gets the selected ID and I can log this in the Console but not sure how to store it somewhere whilst the user has the page open and before the click the Submit button, and also validate that it has been selected when they click Submit.

Here's my script:



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

Here added one hidden field and on click of select button assign latest value to the hidden field and after that on click of submit button check if hidden field contains any value or not. If no value present then prevent submit button click.

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