# Hiding dynamic form elements with a check\_box

**URL:** <https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507>\
**Category:** Get Help\
**Created:** [February 28, 2023, 8:21pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507 "2023-02-28T20:21:16Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcuma](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mcuma/32/171_2.png) [@mcuma](https://discourse.openondemand.org/u/mcuma)\
**Post date:** [February 28, 2023, 8:21pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/1 "2023-02-28T20:21:17Z")

</div>

I am looking more into the dynamic form widgets, and would like to hide a few more advanced input options (memory and GPU selection), ideally with a checkbox. Does someone know if this is possible, and if so how? I am trying something like

```auto
  advanced_options:
    widget: check_box
    value: "0"
    label: "Show advanced job options (memory, GPUs)"
    options:
      - [
           '0',
           data-hide-memtask: true,
           data-hide-gpu-type: true
        ]
      - 1

```

However, this does not result in hiding the fields when the check box is unchecked (= the value is 0).

The select widget does do the job, but, I prefer the check box since it’s smaller.

```auto
  advanced_options:
    widget: select
    value: "no"
    label: "Show advanced job options (memory, GPUs)"
    options:
      - [
           'no',
           data-hide-memtask: true,
           data-hide-gpu-type: true
        ]
      - ['yes', 'true']

```

Thanks,  
Martin

---

<div class="post-metadata">

**Author:** ![travert](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/travert/32/3074_2.png) [@travert](https://discourse.openondemand.org/u/travert)\
**Post date:** [February 28, 2023, 10:49pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/2 "2023-02-28T22:49:30Z")

</div>

I don’t think this can be done with the `check_box` that I’m aware.

Looking at the docs, the `select` is the only option mentioned as having this feature:  
[https://osc.github.io/ood-documentation/latest/app-development/interactive/dynamic-form-widgets.html?highlight=dynamic%20javascript](https://osc.github.io/ood-documentation/latest/app-development/interactive/dynamic-form-widgets.html?highlight=dynamic%20javascript)

---

<div class="post-metadata">

**Author:** ![mcuma](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mcuma/32/171_2.png) [@mcuma](https://discourse.openondemand.org/u/mcuma)\
**Post date:** [March 1, 2023, 4:52pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/3 "2023-03-01T16:52:34Z")

</div>

OK, thanks for the clarification. I ended up using the `select` widget, but, it would be nice to have some kind of button or check box instead since that’d look more natural.

---

<div class="post-metadata">

**Author:** ![mjbludwig](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mjbludwig/32/684_2.png) [@mjbludwig](https://discourse.openondemand.org/u/mjbludwig)\
**Post date:** [March 14, 2023, 8:15pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/4 "2023-03-14T20:15:52Z")

</div>

I have done this with custom Javascript in a form.js file.

For instance in my Jupyter apps, I allow users to use their own custom anaconda envs and even installs but depending on the checkbox, my javascript makes various text fields visible:

Apologies in advance for the crap js code and lack of comments…

form.yml:

```auto
  conda_module:
    widget: "select"
    label: "System-wide Conda Module:"
    help: "Select the conda module used"
    options:
      - ["anaconda3/2019.10", "anaconda3/2019.10"]
      - ["anaconda3/2020.11", "anaconda3/2020.11"]
      - ["anaconda3/2021.11", "anaconda3/2021.11"]
    value: "anaconda3/2021.11"

  conda_install_checkbox:
    widget: "check_box"
    label: "Check box if using custom Anaconda install instead of one of the Anaconda modules"
    value: "0"

  conda_env_checkbox:
    widget: "check_box"
    label: "Check box if using custom Anaconda Environment"
    value: "0"

  conda_install:
    widget: "text_field"
    label: "Path to Custom Anaconda Install"
    help: "Enter the **full** path to your local anaconda installs `bin` dir. (i.e. `/home/[username]/miniconda3/bin`)

**IMPORTANT: If using a Custom Anaconda Install, you must have jupyterlab installed in your base anaconda install, this can be done with `conda install jupyterlab`.**"

  conda_env:
    widget: "text_field"
    label: "Name of Custom Conda Environment"
    help: "Enter the name of a custom Conda Evironment. If you are just using the base environment from a local anaconda install, you can leave blank. 

**IMPORTANT: If using a Custom Anaconda Install, you must have jupyterlab installed in your base anaconda install, this can be done with `conda install jupyterlab`**"

```

form.js:

```auto
'use strict'

/*
Morgan is well aware that this is some ugly JS but its in production...working...so he is going to let it stay this way...
*/

/*
  script to toggle anaconda install and environment options based on selection.
 code references lovingly stolen from https://github.com/OSC/bc_osc_ansys_workbench/blob/master/form.js
*/

function toggle_conda_install() {
  let conda_module = $('#batch_connect_session_context_conda_module');
  let conda_install = $('#batch_connect_session_context_conda_install');
  let conda_install_checkbox = document.getElementById("batch_connect_session_context_conda_install_checkbox"); 
if(conda_install_checkbox.checked === true) {
   conda_install.parent().show();
   conda_module.parent().hide();
  } else {
   conda_install.parent().hide();
   conda_module.parent().show();
  }
}
function toggle_conda_env() {
  let conda_env = $('#batch_connect_session_context_conda_env');
  let conda_env_checkbox = document.getElementById("batch_connect_session_context_conda_env_checkbox"); 
if(conda_env_checkbox.checked === true) {
   conda_env.parent().show();
  } else {
   conda_env.parent().hide();
  }
}
function toggle_modulepath_textbox() {
  let modulepath_textbox = $('#batch_connect_session_context_modulepath_textbox');
  let modulepath_checkbox = document.getElementById("batch_connect_session_context_modulepath_checkbox"); 
if(modulepath_checkbox.checked === true) {
   modulepath_textbox.parent().show();
  } else {
   modulepath_textbox.parent().hide();
  }
}

toggle_conda_install()
toggle_conda_env()
toggle_modulepath_textbox()
let install_trigger = $('#batch_connect_session_context_conda_install_checkbox');
install_trigger.change(toggle_conda_install);
let env_trigger = $('#batch_connect_session_context_conda_env_checkbox');
env_trigger.change(toggle_conda_env);
let modulepath_trigger = $('#batch_connect_session_context_modulepath_checkbox');
modulepath_trigger.change(toggle_modulepath_textbox);
const form = document.getElementById("new_batch_connect_session_context");

form.addEventListener("submit", function(e) {
  let conda_env = document.getElementById("batch_connect_session_context_conda_env");
  let conda_install = document.getElementById("batch_connect_session_context_conda_install");
  if($('#batch_connect_session_context_conda_install').is(":visible") && conda_install.value === "") {
    alert("Custom conda install field cannot be blank!");
    e.preventDefault();
  }
  if($('#batch_connect_session_context_conda_env').is(":visible") && conda_env.value === "") {
    alert("Custom conda env field cannot be blank!");
    e.preventDefault();
  }

});

```

---

<div class="post-metadata">

**Author:** ![gbyrket](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/gbyrket/32/894_2.png) [@gbyrket](https://discourse.openondemand.org/u/gbyrket)\
**Post date:** [March 15, 2023, 1:32pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/5 "2023-03-15T13:32:05Z")

</div>

Hi @mcuma .

I didn’t see a GitHub Issue related to this request, so I’ve created the following github issue for this.

> <https://github.com/OSC/ondemand/issues/2659>
>
> Add ability to use Dynamic JS with the check box element.
> 
> Discourse https://dis…course.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/1
> 
> ┆Issue is synchronized with this \[Asana task\](https://app.asana.com/0/1202821104799596/1204185313976342) by \[Unito\](https://www.unito.io)

---

<div class="post-metadata">

**Author:** ![mcuma](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mcuma/32/171_2.png) [@mcuma](https://discourse.openondemand.org/u/mcuma)\
**Post date:** [March 15, 2023, 3:47pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/6 "2023-03-15T15:47:44Z")

</div>

Thanks Morgan and Gerald. I am tempted to try Morgan’s approach but then somewhat reluctant to clutter our form.js even more so having this working right of OOD with a few lines in form.yml is cleaner.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/osc/original/2X/b/bae70bd0ed39a3ae769c2108155f4cb3e9da8385.png) [@system](https://discourse.openondemand.org/u/system)\
**Post date:** [September 11, 2023, 3:48pm UTC](https://discourse.openondemand.org/t/hiding-dynamic-form-elements-with-a-check-box/2507/7 "2023-09-11T15:48:25Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.