JavaScript - Add Value from Virtual Field

[wbuchanan]

Hello,

I am attempting to create an option on a submission form that will allow me to add a value to a dropdown list of values if that particular value is not currently in the dropdown. I know that you can do this via:

https://howto.caspio.com/tech-tips-and-articles/automatically-add-options-to-dropdowns-and-listboxes/

But it resets all the values and the flow is not ideal. I have 3 dropdowns that each have "add new" virtual field checkbox. So if the value is not in the dropbox, I would click the corresponding "Add New" and then type out the new value. (see the id's for each via picture)

Here is my current code:
- Placed in footer (though I tried in HTML block placed last on the form, as well)

<script type="text/javascript">
function d_text()

{

document.getElementById("cbParamVirtual1").disabled = true;

document.getElementById("cbParamVirtual3").disabled = true;

document.getElementById("cbParamVirtual5").disabled = true;

}

function f_boxcheck()

{

if(document.getElementById("cbParamVirtual2").checked){

document.getElementById("cbParamVirtual1").disabled = false;

}else {document.getElementById("cbParamVirtual1").disabled = true;}

}

function s_boxcheck()

{

if(document.getElementById("cbParamVirtual4").checked){

document.getElementById("cbParamVirtual3").disabled = false;

}else {document.getElementById("cbParamVirtual3").disabled = true;}

}

function r_boxcheck()

{

if(document.getElementById("cbParamVirtual6").checked){

document.getElementById("cbParamVirtual5").disabled = false;

}else {document.getElementById("cbParamVirtual5").disabled = true;}

}

function transfer()

{

if(document.getElementById("cbParamVirtual2").checked)

{

document.getElementById("InsertRecordCategory_ID").value = document.getElementById("cbParamVirtual1").value;

}

if(document.getElementById("cbParamVirtual4").checked)

{

document.getElementById("InsertRecordSub_Cat_ID").value = document.getElementById("cbParamVirtual3").value;

}

if(document.getElementById("cbParamVirtual6").checked)

{

document.getElementById("InsertRecordDiv_Cat_ID").value = document.getElementById("cbParamVirtual5").value;

}

}

window.onload = d_text;
document.getElementById("cbParamVirtual2").onclick = f_boxcheck;
document.getElementById("cbParamVirtual4").onclick = s_boxcheck;
document.getElementById("cbParamVirtual6").onclick = r_boxcheck;
document.getElementById("caspioform").onsubmit = transfer;
</script>

I can't seem to get this to work. Can anyone assist me?

Thank you in advance for the help.

[CoopperBackpack]

Hello @wbuchanan,

May I know if you use the lookup table for a dropdown so that when the new value is added to the dropdown, it should also be added to the table?

[wbuchanan]

Yes, this is on a submission form. The lookup table for the dropdown is the main table that I would like the new value to be added in.

[CoopperBackpack]

Hello @wbuchanan,

The solution depends on the use case. If you need to add newly added values to the lookup table, Virtual fields are not the right choice.

Virtual fields don`t submit data into the table. This is why a separate Submission form is used in this tech tip:

https://howto.caspio.com/tech-tips-and-articles/automatically-add-options-to-dropdowns-and-listboxes/

1) So, if it is fine to add a value to the dropdown from the virtual field without adding this value to the Lookup table, this can be resolved in a rather easy way.

2) If the value should be added to the Lookup table, this is rather complex solution. It requires adding 3 Submission forms as iFrames and JavaScript code to get the submitted value to the dropdown as a new option. 

[MVPofInnovation]

Seems like a good use of Cascading Elements to me. Unless I'm missing something, you don't need Javascript at all. Just build your form with Cascading Elements. This element is build to provide child options based on the option selected in the parent.

https://howto.caspio.com/datapages/datapage-components/cascading-elements/