Jump to content

Remove form option


gbligh

Recommended Posts

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.

Link to comment
Share on other sites

Place a html widget on the page below the form.

Add the script tag

<script></script>

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>

 

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 weeks later...

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:

helped.jpg

 

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

 

  • Thanks 1
Link to comment
Share on other sites

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:

helped.jpg

 

@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!! 😜

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...