Add Validation Before Form Submit Referencing PHP Session Variable

Question

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

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

When they click the Yes button it fires off an AJAX request to set a PHP session variable for the ID of the item they selected:

$productID = $_POST['itemID'];
$_SESSION['selectedItemID'] = $itemID;

When the user submits the form I do a test to ensure the $_SESSION['selectedItemID'] is not empty and if it's empty it displays an error message, e.g.:

if ($_SESSION['selectedItemID'] == '') {
// display error message
}

I would like to add some client site validation so that it displays an alert on the form page and prevents them from submitting the form if the user hasn't already made a selection.

Here's my script as it currently stands:

$(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 itemID = $(this).closest('tr').attr('id');
    console.log(itemID);
    // Create a reference to $(this) here:
    $this = $(this);
    $.post('updateSelection.php', {
      itemID: itemID,
      selectionType: 'yes'
    }, function(data) {
      data = JSON.parse(data);
      if (data.error) {
        console.log(data);
        console.log('something was wrong with the ajax request');
        $this.closest('tr').addClass("warning");
        //make alert visible
        $("#alert_ajax_error").show();
        return; // stop executing this function any further
      } else {
        console.log('update successful - success add class to table row');
        $this.closest('tr').addClass("success");
        $this.closest('tr').removeClass("danger");
        //$(this).closest('tr').attr('class','success');
      }
    }).fail(function(xhr) {
      console.log('ajax request failed');
      // no data available in this context
      $this.closest('tr').addClass("warning");
      //make alert visible
      $("#alert_ajax_error").show();
    });
  });
});

I'm not sure how I can link the submit button to check if there the PHP $_SESSION['selectedItemID'] session variable exists? Or if there is another way to achieve the same result?

Well a nice plugin to have form validation using jQuery is formvalidation.io . You download a file, include it, include jquery and use a custom validator ( formvalidation.io/validators ) . For example with this, you could disable submit button on a form until all fields are validated as you want them. If all fields pass the validation then submit button becomes available. — Antonios Tsimourtos
– Antonios Tsimourtos, Commented Oct 31, 2016 at 8:40
Thanks @Tony I'm not using form fields with this form as such, I have buttons in the table which users click on which in turn call a php script to set some session variables to track their selections. I could potentially convert this to use Javascript to store the selections instead of calling a PHP page and then use all the validation could happen using Javascript — user982124
– user982124, Commented Nov 1, 2016 at 0:13

user982124 · Accepted Answer · 2016-11-10 05:43:22Z

0

I ended up writing the selected ID to a hidden form input then checking on submission if that hidden input is empty.

answered Nov 10, 2016 at 5:43

user982124

4,65217 gold badges72 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add Validation Before Form Submit Referencing PHP Session Variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related