Use Ajax to refresh available options

Question

I'm struggling with coding an ajax refresh of options in a select list based on what's already selected in the previous field.

Scenario is I get a list of positions and each position one or many nominations for that position. So I display the position name and then a list of each nomination name which has a selection listbox "1st preference", "2nd preference", etc and the preferences are dictated by the number of nominations for that position.

So when someone selects for example "3rd preference" for the first nomination, I want to remove that "3rd preference" option from the select box of the next nomination's listbox. Any clues and guidance on this much appreciated. The following code is what I'm using in the tmpl/default.php.

<form id="form-voter"
  action="<?php echo Route::_('index.php?option=com_mycomponent&task=voterform.save'); ?>"
  method="post" class="form-validate form-horizontal" enctype="multipart/form-data">

<?php echo $nominations->form->renderFieldset('sysinfo'); ?>
<?php echo $nominations->form->renderField('user_id'); ?>
<?php echo $nominations->form->renderField('cat_id'); ?>

<?php echo LayoutHelper::render('default_proxy', array('data' => $nominations), dirname(__FILE__)); ?>

<?php /* ------------  Cycle through the positions records and show the nomination   ------ */ ?>
<?php /* the nominations are in an array of position arrays and then each position array is */ ?>
<?php /* an array of nominations objects. so Key is the posID */ ?>

<?php foreach ($nominations->nominations AS $posID => $nomins) : $NomCntr = 0; ?>

    <?php if (is_array($nomins) && !empty($nomins)) : ?>

        <div class="control-group">
            <div class="control-label">
                <label id="jform_nom_ids_lbl" for="jform_nom_ids_<?php echo $posID; ?>">
                    <?php echo $nomins[0]->position_id_name; ?>
                </label>
            </div>
            <div class="controls extrawide">

                <?php $qtyNoms = \count($nomins); ?>
                <?php foreach ($nomins AS $nom) : $NomCntr++; ?>

                    <?php if ($NomCntr == 1) : ?>
                        <?php echo '<p> <p /><p>'.Text::sprintf('COM_MYCOMPONENT_MULTIPLE_POSITIONS_PREF', $nom->pos_qty).'<p />'; ?>
                    <?php endif; ?>

                    <?php echo $selectList = MyajaxHelper::displayPrefVoteOptions($nom, $qtyNoms, $posID); ?>

                <?php endforeach; ?>

            </div>
        </div>
    <?php endif; ?>

<?php endforeach; ?>

<div class="control-group">
    <div class="controls">
        <?php if ($nominations->canSave): ?>
            <button type="submit" class="validate btn btn-primary">
                <?php echo Text::_('JSUBMIT'); ?>
            </button>
        <?php endif; ?>
        <a class="btn btn-secondary"
           href="<?php echo Route::_('index.php?option=com_mycomponent&task=voterform.cancel'); ?>"
           title="<?php echo Text::_('JCANCEL'); ?>">
            <?php echo Text::_('JCANCEL'); ?>
        </a>
    </div>
</div>

<input type="hidden" name="option" value="com_mycomponent"/>
<input type="hidden" name="task" value="voterform.save"/>
<?php echo HTMLHelper::_('form.token'); ?>

EDITED: since reviewing the original code I've updated the above and with a hope I may get an ajax answer, I've moved the selection list to a helper called MyajaxHelper and the code is:

    /**
 * Create a selection list for preferential voting
 * @param   object  $nom  nomination object
 * @param   integer $qtyNoms number of nominations for this position
 * @param   integer $posID  id reference of the position
 * @return  selection list box
 */
public static function displayPrefVoteOptions($nom, $qtyNoms, $posID)
{
    // Load admin language file
    $lang = Factory::getApplication()->getLanguage();
    $lang->load('com_mycomponent', JPATH_ADMINISTRATOR);

    // setup array of the votes per option
    $nomVotes = \range(1,$qtyNoms,1);
    \arsort($nomVotes);
    $i=1;

    $selectList = '<div class="selectlist">';
    $selectList .= '<label id="jform_nom_ids_lbl" for="jform_nom_ids_'.$posID.'" class="selectlist">';
    $selectList .= '<div style="width:230px;float:left;">'.$nom->nomination_name.'</div>';
    $selectList .= '<div style="with:100px;float:right;">';
    $selectList .= '<select id="jform_nom_ids_'.$posID.'" name="jform[nom_ids][nom_id_'.$posID.'_'.$nom->id.']">';

    foreach ($nomVotes as $vote) {
        $nf = new \NumberFormatter('en_GB', \NumberFormatter::ORDINAL);
        $sel = $nf->format($i);

        if ($i == 1) {
            $selectList .= '<option value="0" >'.Text::_('MYCOMPONENT_NO_VOTE').'</option>';
        }
        $selectList .= '<option value="'.$vote.'" >'.Text::sprintf('COM_MYCOMPONENT_PREF_SELECTION', $sel).'</option>';

    }
    $selectList .= '</select></div></label></div>';
    
    return  $selectList;
}

Answer 1

You put a lot of work into this already as I see. Since you preload the Form with all the options, you do not have to load the options again and again from PHP (from the server). So according to my approach and understanding of this task, you do not need an Ajax call for this at all.

What you need is a Javascript script that is updating the possible options (preferences pool) after one option was already selected for a Position.

I created an abstract of this problem with Javascript and HTML. I really hope I understood the explained task well:

The HTML Form:

<form action="" id="myform">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
  <option value="">--Please choose an option--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <label for="ships">Choose a ship:</label>
  <select name="ships" id="ships">
  <option value="">--Please choose an option--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <label for="drones">Choose a drone:</label>
  <select name="drones" id="drones">
  <option value="">--Please choose an option--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

We can say, the Form provides different Selection sections but with the same options in all of the selection sections, so different positions but same nominees. The options are given, we do not have to load those again and again from the server in this case.

We just have to remove the already selected items from the possible options from the other select sections. And I just wrote a custom pure javascript code for this task. You have to load this JS script in your custom JS file on the page where your Form is:

(you have to change 'myform' Form id to your own 'form-voter' in this script)

window.addEventListener("load", () => {

    // add your form id to the selector!        
    const form1 = document.getElementById('myform');
    
    const selectEl = form1.querySelectorAll('select');     

    selectEl.forEach((selEl) => {
        
        selEl.addEventListener("change", () => {
            
            const opsCollection = selEl.options;
            
            let indexValue = selEl.options[selEl.selectedIndex];
            let textValue = indexValue.text;
            
            deleteEl(form1, textValue);
            addOption(selEl, textValue);                
        });
    });
});

function deleteEl (form, textValue) {
    const selectEl2 = form.querySelectorAll('select');
    for (let index = 0; index < selectEl2.length; index++) {
        const opsCollection = selectEl2[index].options;
        
        for (let i = 0; i < opsCollection.length; i++) {
                                    
            if (opsCollection[i].text == textValue  ) {            
                selectEl2[index].removeChild(opsCollection[i]);
            }
        };            
    }    
}

function addOption(el, value) {
    const opt = document.createElement('option');
    opt.value = opt.text = value;
    el.appendChild(opt);
    opt.selected = true;
}

And here you can check this whole script in operation:

https://jsfiddle.net/go4zdm6w/3/

Updated with using option field integer value: https://jsfiddle.net/9v7yde6r/1/

This script can theoretically handle as many select sections and options as you want. It could be optimized with a few lines here and there of course, but I think this is basically what you need. I really hope this will help you after seeing how hard work you already put into this.

Around 2 years ago I posted a longer write-up about how to load items dynamically in selection Form fields from the database in Joomla 3, using Ajax. But that is for a bit different task: How to dynamically reload admin-form-fields in Joomla

SECOND RUN

I updated the code with the bit deeper understanding of the task. Actually we only need the array from PHP, all other things can be handled by Javascript dynamically:

the HTML loaded with PHP:

<div class="container" class="created-form">
<h2>Position 1</h2>
    <div id="selection-area">
        <form action="" id="form3">
        <label for="nom-select">Choose a nominee:</label>
            <select></select>
        </form>
    </div>
</div>

And the Javascript part:

window.addEventListener("load", () => {

    // this array should be provided by PHP
    const positions = ['Foo', 'Bar', 'Baz', 'Gaz'];

    // this array should be provided by PHP
    const nominees = ["Select nominee", 'Adam', 'Stewart', 'David', 'Joe', 'Margaret'];

    const prefCount = nominees.length - 1 ;

    const createdForm = document.getElementById('form3');

    const select1 = createdForm.querySelector('select');

    let options = nominees.map(nominee => `<option value=${nominee}>${nominee}</option>`).join('\n');
    select1.innerHTML = options;

    let selectedPref = null;

    let selectedPrefTexts = [];    

    let counter1 = 0

    select1.addEventListener("change", (sel) => {

        counter1++;

        if (counter1 <= prefCount) {  

            const selValue = select1.options[select1.selectedIndex].text;

            let prefLabel = document.createElement("h4");
            prefLabel.innerHTML = "Select preference for " + selValue;            

            let prefSelect = document.createElement('select');
            createdForm.appendChild(prefLabel);
            createdForm.appendChild(prefSelect);

            const prefSelection = addOption(prefCount, prefSelect, createdForm, selectedPref, selectedPrefTexts);

            // we do not want the already selected nominee in options
            deleteNomOption(select1); 

            // disable nominees until preference will be selected for the selected nominee
            select1.setAttribute("disabled", "true");          
            
            prefSelection.addEventListener("change", () => {
                selectedPref = prefSelection.options[prefSelection.selectedIndex].text;
                selectedPrefTexts.push(selectedPref);
                
                let noticeNext = '<p id="short-notice" style="color: green; font-weigth: bold;">Select another nominee</p>';
                let thanksText = '<p id="thanks-notice" style="color: green; font-weigth: bold;">Thank you, please submit</p>'
                if (counter1 < prefCount) {
                    prefSelect.insertAdjacentHTML("afterend", noticeNext);                    
                } else {
                    prefSelect.insertAdjacentHTML("afterend", thanksText);
                }
               
                prefSelection.setAttribute("disabled", "true");

                // re-enable nominee select for the next nominee selection
                select1.removeAttribute("disabled");
            });
        }

        // adding a submit button when everything is selected
        if (counter1 == prefCount) {
            let subBtn = '<input type="submit" value="Submit" style="display: block; margin-top:0.8rem;">';
            createdForm.insertAdjacentHTML("beforeend", subBtn);

            // with click on submit we have to remove preferences' select fields 'disabled' attribute!!!!! -- ( element.removeAttribute("disabled") )
            // this function should be added here
            // or at every selection we should collect the selected data and submit that to the server as a prepared json object.
        }

    }); 

});

function addOption(count, el, form, selectedPref, selectedVals) {
    for (let index = 0; index < count+1; index++) {
            
        let prefOption = document.createElement('option');
        if (index == 0) {
            prefOption.innerHTML = "Select Preference"
            el.appendChild(prefOption);
            continue;
        }
        
        if (!selectedVals.includes("Preference " + (index))) {
            prefOption.value = "Preference " + (index);
            prefOption.innerHTML = "Preference " + (index);
            el.appendChild(prefOption);
        }      
                       
    }

    return el;
}

function deleteNomOption(el) {    
    el.options[el.selectedIndex].remove();
}

So this is the updated basic code of how I understood this task in structure and functionality. This could be still improved a lot with styling, and with little bit of modification here and there if we have much more time.

You can check and try this code in operation too on jsfiddle if it is reachable:

https://jsfiddle.net/tyvanmqf/1/