Remove form option

gbligh · February 23, 2023

Is there a way to remove an option from a dropdown/radio button, within a form, once it has been selected? @Graham Quince

ADT · February 28, 2023

On 23/02/2023 at 20:36, gbligh said:

Is there a way to remove an option from a dropdown/radio button, within a form, once it has been selected? @Graham Quince

Do you mean like once that option is full remove that option?

gbligh · February 28, 2023

2 hours ago, ADT said:

Do you mean like once that option is full remove that option?

No, I mean once a student has selected it in their form it disappears from the other drop downs in that form.

Graham Quince · March 1, 2023

Sorry, I've been away at a trade show.

Umm, I think we're getting into quite complicated territory here - you'd need code to listen to the form for a click response, then make changes to other dropdowns - it could easily get messed up.

It might be simpler to create a form in an HTML widget, include these features then on submission submit it using the Form API. Simpler, but a bit time consuming.

pconkie · March 3, 2023

Place a html widget on the page below the form.

Add the script tag

Within the script tag place some JavaScript

this gets a handle on the current site : $site = this.element.closest(".sites-site-content");
this gets the form on the same site as this code : $form = $site.find("div[data-name='Widget.Forms']");
this adds a listener to any selection list on the form: $form.on("change", "select", function() { dostuff() });
because frog forms pull in their data after the form is rendered you may need to wait to set these $site and $form variables
then you can put your logic in dostuff()

<script>
  //variables needed
    var $form, $site;
    var that = this;

    //2 second delay (2000ms) should do it.
    setTimeout(function() {
      
        var $site = that.element.closest(".sites-site-content");
        $form = $site.find("div[data-name='Widget.Forms']");

        //can remove this once working or leave - can get issues switching edit/live modes without
        //this wont be issue for users other than you though!
        $form.off("select");
        
        $form.on("change", "select", function() {
            doStuff(this.val());
        });
        
    }, 2000);
    
    function doStuff(selectedoption) {
      $form.find("select").each(function() {
          $(this).find("option[value='"+selectedoption+"']").remove();
      });
    }

</script>

pconkie · March 3, 2023

Haven't tested this!

These lines might need slight tweaks...

$(this).find("option[value='"+selectedoption+"']").remove();

 doStuff(this.val());

ADT · March 6, 2023

On 03/03/2023 at 22:20, pconkie said:
Haven't tested this!

These lines might need slight tweaks...
$(this).find("option[value='"+selectedoption+"']").remove();
 doStuff(this.val());

Long time no speak Conkie!!! Hope you and yours are well!!! 👍

Graham Quince · March 31, 2023

I've been playing around with this today, it's more complicated now, but I think I have it:

<style>
    select[id="9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A"],
    select[id="9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03"],
    select[id="9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A"]
    {
        display: none;
    }
</style>

<script>
setTimeout(function(){  
    
    var form = $('div[data-content-uuid="9EC51EEE200287452C5BFFA9D479C00C908DF88CDDE54F77"]');
    
    var select1 = '9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A';
    var select2 = '9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03';
    var select3 = '9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A';
    form.find('select').show();
    
    var currentSelections = {};
    currentSelections[select1] = '';
    currentSelections[select2] = '';
    currentSelections[select3] = '';

    form.on('change', 'select', function() {
        
        var selectArray = [select1,select2,select3];
        var index = selectArray.indexOf(this.id);
        selectArray.splice(index, 1);
        
        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+currentSelections[this.id]+'"]').show();
        }
        currentSelections[this.id] = this.value;

        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+this.value+'"]').hide();
        }

    });

}, 2000);

</script>

First off, I hide the select options, to give Frog a chance to load the form before the timeout function runs:

<style>
    select[id="9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A"],
    select[id="9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03"],
    select[id="9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A"]
    {
        display: none;
    }
</style>

Then after two seconds (2000), the HTML widget finds the form and shows the select options.

I've also listed the three select dropdowns I care about:


setTimeout(function(){  
    
    var form = $('div[data-content-uuid="9EC51EEE200287452C5BFFA9D479C00C908DF88CDDE54F77"]');
    
    var select1 = '9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A';
    var select2 = '9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03';
    var select3 = '9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A';
    form.find('select').show();
  
  
 ...
 
}, 2000);

Next, I've made an object to hold a history, so that a user can update their choices and not lose the original options from the other dropdowns:

    var currentSelections = {};
    currentSelections[select1] = '';
    currentSelections[select2] = '';
    currentSelections[select3] = '';

Then the code waits for a change to any of the dropdowns.

@ADT - you have a couple of other dropdowns in your form which might cause an issue with the history. I'd suggest swapping these for radio buttons.

On selecting an option, the function creates an array of all three dropdown IDs, then identifies which dropdown was selected and removes that from the list. (This prevents the selected option disappearing from it too).

The function then runs through all the dropdowns, turning back on any from the history, before updating the history with the new selection and hiding that selection from the other two dropdowns.


    form.on('change', 'select', function() {
        
        var selectArray = [select1,select2,select3];
        var index = selectArray.indexOf(this.id);
        selectArray.splice(index, 1);
        
        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+currentSelections[this.id]+'"]').show();
        }
        currentSelections[this.id] = this.value;

        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+this.value+'"]').hide();
        }

    });

To use, you'll need the Form widget's UUID and the ID's of each select / dropdown:

@ADT - I'm blocked from saving HTML on Gosforth, so you'll have to copy the code from the top box. I had to make a copy of the site, so the UUID and IDs might be different.

ADT · March 31, 2023

1 hour ago, Graham Quince said:

I've been playing around with this today, it's more complicated now, but I think I have it:

<style>
    select[id="9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A"],
    select[id="9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03"],
    select[id="9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A"]
    {
        display: none;
    }
</style>

<script>
setTimeout(function(){  
    
    var form = $('div[data-content-uuid="9EC51EEE200287452C5BFFA9D479C00C908DF88CDDE54F77"]');
    
    var select1 = '9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A';
    var select2 = '9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03';
    var select3 = '9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A';
    form.find('select').show();
    
    var currentSelections = {};
    currentSelections[select1] = '';
    currentSelections[select2] = '';
    currentSelections[select3] = '';

    form.on('change', 'select', function() {
        
        var selectArray = [select1,select2,select3];
        var index = selectArray.indexOf(this.id);
        selectArray.splice(index, 1);
        
        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+currentSelections[this.id]+'"]').show();
        }
        currentSelections[this.id] = this.value;

        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+this.value+'"]').hide();
        }

    });

}, 2000);

</script>

First off, I hide the select options, to give Frog a chance to load the form before the timeout function runs:

<style>
    select[id="9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A"],
    select[id="9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03"],
    select[id="9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A"]
    {
        display: none;
    }
</style>

Then after two seconds (2000), the HTML widget finds the form and shows the select options.

I've also listed the three select dropdowns I care about:


setTimeout(function(){  
    
    var form = $('div[data-content-uuid="9EC51EEE200287452C5BFFA9D479C00C908DF88CDDE54F77"]');
    
    var select1 = '9EC520B82003FFC1B8C84F291890790236728F8C3D26BB0A';
    var select2 = '9EC520AF2003FBC0C1F0AF732938E9061A807D2CA7348E03';
    var select3 = '9EC520B52003FEABEA582FCAEEEEE90DD087E7DCE9009A4A';
    form.find('select').show();
  
  
 ...
 
}, 2000);

Next, I've made an object to hold a history, so that a user can update their choices and not lose the original options from the other dropdowns:

    var currentSelections = {};
    currentSelections[select1] = '';
    currentSelections[select2] = '';
    currentSelections[select3] = '';

Then the code waits for a change to any of the dropdowns.

@ADT - you have a couple of other dropdowns in your form which might cause an issue with the history. I'd suggest swapping these for radio buttons.

On selecting an option, the function creates an array of all three dropdown IDs, then identifies which dropdown was selected and removes that from the list. (This prevents the selected option disappearing from it too).

The function then runs through all the dropdowns, turning back on any from the history, before updating the history with the new selection and hiding that selection from the other two dropdowns.


    form.on('change', 'select', function() {
        
        var selectArray = [select1,select2,select3];
        var index = selectArray.indexOf(this.id);
        selectArray.splice(index, 1);
        
        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+currentSelections[this.id]+'"]').show();
        }
        currentSelections[this.id] = this.value;

        for (var i = 0; i < selectArray.length; i++) {
            form.find('select[id="'+selectArray[i]+'"]').find('option[value="'+this.value+'"]').hide();
        }

    });

To use, you'll need the Form widget's UUID and the ID's of each select / dropdown:

@ADT - I'm blocked from saving HTML on Gosforth, so you'll have to copy the code from the top box. I had to make a copy of the site, so the UUID and IDs might be different.

I keep saying this... but I'll say it again........ I don't care what everyone else says about you...... you've always come up trumps for me!! 😜

Sign In

Remove form option

Recommended Posts

gbligh

ADT

gbligh

Graham Quince

pconkie

pconkie

ADT

Graham Quince

ADT

Create an account or sign in to comment

Create an account

Sign in

Forums