# Form.js to support dynamic fields

**URL:** <https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183>\
**Category:** Get Help\
**Created:** [October 28, 2020, 7:38am UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183 "2020-10-28T07:38:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![KMuriki](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@KMuriki](https://discourse.openondemand.org/u/KMuriki)\
**Post date:** [October 28, 2020, 7:38am UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/1 "2020-10-28T07:38:51Z")

</div>

I’m trying to use the form.js example from here

> <https://github.com/OSC/bc_osc_ansys_workbench/blob/master/form.js>

  
to dynamically display form fields.

By adding form.js to my app I’m able to control the display of form fields but when I add form.js the launch button is not working. Nothing happens when I click on the launch button. I see this inside the javascript console

“An invalid form control with name=‘batch\_connect\_session\_context[bc\_num\_slots]’ is not focusable.”

Any clue on where I messed it up ?

Thanks for your assistance,  
–Krishna.

---

<div class="post-metadata">

**Author:** ![mario](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/mario/32/662_2.png) [@mario](https://discourse.openondemand.org/u/mario)\
**Post date:** [October 28, 2020, 2:29pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/2 "2020-10-28T14:29:40Z")

</div>

@KMuriki

Can you provide your entire `form.js` and `form.yml` that are at the root of your batch connect application?

I double-checked the deployed version that we have here at OSC and we’re using the same `form.js`

---

<div class="post-metadata">

**Author:** ![KMuriki](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@KMuriki](https://discourse.openondemand.org/u/KMuriki)\
**Post date:** [October 28, 2020, 3:21pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/3 "2020-10-28T15:21:44Z")

</div>

Mario, Thanks for your reply. Please find form.js and form.yml below.

```javascript
'use strict'

/**
 * Toggle the visibilty of a form group
 *  
 * @param {string} form_id The form identifier
 * @param {boolean} show Whether to show or hide
 */
function toggle_visibilty_of_form_group(form_id, show) {
  let form_element = $(form_id);
  let parent = form_element.parent();

  if(show) {
    parent.show();
  } else {
    form_element.val('');
    parent.hide();
  }
}

/**
 * Toggle the visibilty of the SLURM queue fields
 *  
 * interactive_mode: hidden
 * interactive_mode_gpu: hidden
 * batch_mode: visible
 */
function toggle_slurm_queues_field_visibility() {
  let type_ofuse = $("#batch_connect_session_context_type_ofuse");

  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_job_name',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_slurm_partition',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_bc_account',
    type_ofuse.val() === 'batch'
  );
  toggle_visibilty_of_form_group(
    '#batch_connect_session_context_qos_name',
    type_ofuse.val() === 'batch'
  );
/* toggle_visibilty_of_form_group(
 * '#batch_connect_session_context_bc_num_slots',
 * type_ofuse.val() === 'batch'
 * );
 */ 
}

/**
 * Sets the change handler for the batch type of usage select.
 */
function set_type_ofuse_change_handler() {
  let type_ofuse = $("#batch_connect_session_context_type_ofuse");
  type_ofuse.change(toggle_slurm_queues_field_visibility);
}

/**
 * Install event handlers
 */
$(document).ready(function() {
  // Ensure that fields are shown or hidden based on what was set in the last session
  toggle_slurm_queues_field_visibility();
  
  set_type_ofuse_change_handler();
});

```

* * *

yaml

```auto
# Batch Connect app configuration file
#
# @note Used to define the submitted cluster, title, description, and
# hard-coded/user-defined attributes that make up this Batch Connect app.
---

cluster: "lrc"
cacheable: false

form:
  - modules
  - extra_jupyter_args
  - type_ofuse
  - job_name
  - slurm_partition
  - bc_account
  - qos_name
  - bc_num_slots
  - bc_num_hours
  - bc_email_on_started

attributes:
  modules: "python/3.7"
  extra_jupyter_args: ""

  type_ofuse:
    widget: "select"
    label: "Type of use"
    help: "Choose the mode of running your Jupyter Server"
    cacheable: false
    options:
      - ["interactive_mode, for exploration", "interactive"]
      - ["interactive_mode_gpu, for exploration", "interactive_gpu"]
      - ["batch_mode", "batch"]

  bc_num_hours:
    label: "Wall Clock Time"
    help: "How many hours do you want to run this Jupyter Server for ?"

  job_name:
    label: "Name of the job"
    
  slurm_partition:
    widget: "select"
    label: "SLURM Partition"
    help: "Choose the name of the SLURM Partition in which you want to launch this Jupyter Server"
    cacheable: false
    options:
      - ["alice", "alice"]
      - ["alsacc", "alsacc"]

  bc_account:
    label: "SLURM Project/Account Name"
    help: "For non Lawrencium partitions you can leave this blank."

  qos_name:
    label: "SLURM QoS Name"
    help: "Most users can leave it black for default assignment, Lawrencium Condo users want to specify their condo QoS name"

  bc_num_slots:
    label: "Number of Nodes & Number of tasks (or cpus)"
    help: "Your job will be assigned this many number of nodes with this many cpus/tasks on each node"
```

---

<div class="post-metadata">

**Author:** ![jeff.ohrstrom](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jeff.ohrstrom/32/136_2.png) [@jeff.ohrstrom](https://discourse.openondemand.org/u/jeff.ohrstrom)\
**Post date:** [October 28, 2020, 8:29pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/4 "2020-10-28T20:29:54Z")

</div>

`bc_num_slots` get’s generated as a ‘required’ field. Looks like when you hide it you also set it to blank and then when you try to submit, it’s complaining about the fact you’ve left a required field blank.

You should probably use a different field like `num_cores` and use _that_ in your `submit.yml.erb`. In this file you’ll have to set `-c/--cpus-per-task` to the value and deal with empty values (or let Slurm choose the default and don’t pass `-c/--cpus-per-task` at all.

As an aside, thanks for letting us know about your use case! We eventually want to add these javascript helpers into the core distribution so folks like you can get this functionality out of the box, so it’s good to know your use case!

---

<div class="post-metadata">

**Author:** ![KMuriki](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@KMuriki](https://discourse.openondemand.org/u/KMuriki)\
**Post date:** [October 28, 2020, 10:25pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/5 "2020-10-28T22:25:10Z")

</div>

Thanks for the reply, that makes sense. I was planning to look into handling nodes/cores/tasks options next anyways and your suggestion of skipping bc\_num\_slots and coming up with my own variables totally makes sense.

---

<div class="post-metadata">

**Author:** ![KMuriki](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@KMuriki](https://discourse.openondemand.org/u/KMuriki)\
**Post date:** [October 28, 2020, 11:58pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/6 "2020-10-28T23:58:44Z")

</div>

Jeff,

In your bc\_osc\_ansys\_workbench example in case you wanted to add a new filed to the form when user\_license\_provider is select to be ‘osc’, should it have worked if you add below inside the toggle\_license\_field\_visibility() function ?

toggle\_visibilty\_of\_form\_group(  
‘#batch\_connect\_session\_context\_SOME\_NEW\_FIELD’,  
user\_license\_provider.val() === ‘osc’  
);

Or it doesn’t work that way ?

Thanks,  
Krishna.

---

<div class="post-metadata">

**Author:** ![jeff.ohrstrom](https://sea1.discourse-cdn.com/flex015/user_avatar/discourse.openondemand.org/jeff.ohrstrom/32/136_2.png) [@jeff.ohrstrom](https://discourse.openondemand.org/u/jeff.ohrstrom)\
**Post date:** [October 29, 2020, 1:46pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/7 "2020-10-29T13:46:49Z")

</div>

Sure that would work, but you’d have to add that code snippet to a new handler. The current handler watches for changes to `batch_connect_session_context_type_ofuse` you’d need to add a new handler for changes to `user_license_provider`.

---

<div class="post-metadata">

**Author:** ![westburg.2](https://avatars.discourse-cdn.com/v4/letter/w/0ea827/32.png) [@westburg.2](https://discourse.openondemand.org/u/westburg.2)\
**Post date:** [May 26, 2022, 3:43pm UTC](https://discourse.openondemand.org/t/form-js-to-support-dynamic-fields/1183/8 "2022-05-26T15:43:04Z")

</div>