Display list of checkbox items except selected dropdown item

Question

I have dropdown list of items and a popup (used colorbox for opening popup) with a list of checkboxes. The popup is shown on click of '+Add/Edit'. Both the dropdown items and the checkboxes are generated in PHP from a complaint.csv file.

complaint.csv file

1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...

PHP code

<label class="question-name" ng-class="{error:hasError()}">
  <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
    Chief Complaint
  </span>
  <span class="icon-required" ng-show="question.required"></span>
</label>

<select name="Language.PrimarySpoken" ng-hide="showAddAnswer"
        ng-model="question.response.value" 
        ng-options="a.text as a.getText() for a in question.answers.items"
        id="Language.PrimarySpoken" ng-value="a.text" class="input-wide" 
        ng-class="{error:hasError()}">
  <option class="hidden" disabled="disabled" value=""></option>

  <?php
    $file_handle = fopen("../complaint.csv", "r");
    while (!feof($file_handle)) {
      $lines_of_text[] = fgetcsv($file_handle, 1024);
    }
    fclose($file_handle);

    foreach ( $lines_of_text as $line_of_text): 
  ?>
      <option value="<?php print $line_of_text[1]; ?>">
        <?php print $line_of_text[1]; ?></option>
      <?php endforeach; ?>
    </select>
    <br/> <br/>

    <label class="question-name" ng-class="{error:hasError()}">
      <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
        Additional Complaint
      </span>
      <span class="icon-required" ng-show="question.required"></span>
    </label>

    <div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text" ></div>
    <div class="form-row addlink ng-binding" 
         ng-bind-html="question.getText()">
      <em><a class='inline' href="#inline_content">+ Add/Edit</a></em>
    </div>

    <div style='display:none'>
      <div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>

        <form action="" id="popup_form">

       <?php

        // Setup ---------------------------------------------------------------        
        define('numcols',4);  // set the number of columns here
        $csv = array_map('str_getcsv', file('../complaint.csv'));
        $numcsv = count($csv);
        $linespercol = floor($numcsv / numcols);
        $remainder   = ($numcsv % numcols);
        // Setup ---------------------------------------------------------------        


        // The n-column table --------------------------------------------------
        echo '<div class="table">'.PHP_EOL;
        echo '   <div class="column">'.PHP_EOL;

        $lines = 0;
        $lpc   = $linespercol;
        if ($remainder>0) { $lpc++; $remainder--; }
        foreach($csv as $item) {
            $lines++;
            if ($lines>$lpc) {
                echo '   </div>' . PHP_EOL . '<div class="column">'.PHP_EOL;
                $lines = 1;
                $lpc   = $linespercol;
                if ($remainder>0) { $lpc++; $remainder--; }
            }
            echo '      <label class="checkbox" for="checkbox'.$item[0].'" style="font-size:20px;">
                        <input type="checkbox" name="complaint" value="'.$item[1].'" id="checkbox'.$item[0].'" data-toggle="checkbox">'
                            .$item[1].
                        '</label><br />';
        }
        echo '   </div>'.PHP_EOL;
        echo '</div>'.PHP_EOL;
        // The n-column table --------------------------------------------------


    ?>
         <br/>
         <input type="submit" name="submit" id="update" 
                class="button button-orange" 
                style="width: 90px; margin-top: 450px; margin-left:-1062px;" 
                value="Update">
         <input type="submit" name="cancel" id="cancel" 
                class="button button-orange" 
                style="width: 90px; background-color:#36606e;" 
                value="Cancel">

        </form>    
      </div>
    </div>

Question:

1. If a Main complaint item is select then that same complaint does not appear in Additional Complaint list (i.e. if 'complaint type 1' is selected for Main complaint, 'complaint type 1' does not display on Additional Complaint list)

How should I get that using one complaint.csv file like checking for the selected item, and avoid it when displaying the list e.g on select 'complaint type 1', the data from complaint.csv file will be display on popup checkbox list except 'complaint type 1' which is selected?

2. There is empty space generating if we remove the element. I don't want the empty space of removed item in checkbox list. Empty space means if 'complaint type 2' is removed then there empty space creates between 'complaint type 1' and 'complaint type 3'.

Is there any way to have AJAX for this situation like when the item is selected AJAX will call and it will remove the item from the checkbox list which is selected and then load the new items list except the selected one. (right now both list are loading at a same time on page load insted of that using AJAX the dropdown list should load on page load and checkbox list on click '+Add/Edit' button avoiding selected item.) Thus might be the empty space will not be there.

How this should be done using AJAX?

OR

Can anyone please suggest any solution with PHP or JS to get both requirements?

Answer 1

1. In your code, make sure the select dropdown value is $line_of_text[0] e.g. 1, 2, 3 etc.
2. Now add onChange="hideSpaceAndComplain(this.value)" on the select element.

3. Copy the following javascript function as is

   function hideSpaceAndComplain(id){
   
      //Hide selected one
      $("#popup_form").find('label').show(); 
   
      //Hide selected one
      $('input[value=' + id + ']').parents('label').hide();
   
      //Now rearrange all the visible label in columns 
      var visibleLabels = $("#popup_form").find('label:visible');
   
      visibleLabels.each(function(i,v){
         var column = Math.floor(i/4); // 4 being the number of column
         $(this).appendTo($("#popup_form").find('.column:eq('+column+')'));
      });
   }
   

This is doing both hiding the element which is selected and then re arranging the labels in column to remove one extra space.

Answer 2

Since the logic you describe depends on what the user does in the browser, what you functionality does must be done in the browser, that means in Javascript.

According to the tags of the question you are using JQuery, so here are some pointers on how to do it with JQuery. First you have to attach an event handler to the dropdown to know when the user changes its value:

$('select').on('change', function() {
  //Put here what to do when the value of the dropdown changes.
}

In that function, you want to do two things:

• Un-hide the complaint that you may have hidden previously
• Hide the main complaint

To do so, write something like this in the event handler:

//Un-hide everything
$('label').show();

//Hide selected one
$('input[value=' + $(this).val() + ']').parent().hide();

You can see a working example in this JSFiddle. Hope this helps.

Note that I see in your code that you uses Angular, so you may want to use this instead. But I am not sure why you generate the select options both with Angular and PHP, so I am assuming this is some copy-pasted code that you are not using.