Cannot Populate Hidden Field

[ccalbreath]

I have 12 Multi-Select Drop Down boxes that on a Submission page. I have an event listener created for each that populates a text box with the users selection. This works great as long as the field the javascript is populating is NOT hidden. Interesting enough, it works for the first multi-select dropdown on the form. Just not the remaining 11. Here is the javascript I am using:

<script>
document.querySelector("input[id^='InsertRecordAerial_Manlift']").addEventListener('change', function()
    {document.getElementById('InsertRecordEquipment_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordAerial_Manlift']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordAttachments']").addEventListener('change', function()
    {document.getElementById('InsertRecordAttachments_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordAttachments']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordATVs']").addEventListener('change', function()
    {document.getElementById('InsertRecordATVs_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordATVs']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordCars']").addEventListener('change', function()
    {document.getElementById('InsertRecordCars_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordCars']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordDozers']").addEventListener('change', function()
    {document.getElementById('InsertRecordDozers_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordDozers']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordEquipment_Machines']").addEventListener('change', function()
    {document.getElementById('InsertRecordEquipment_Machines_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordEquipment_Machines']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordExcavators']").addEventListener('change', function()
    {document.getElementById('InsertRecordExcavators_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordExcavators']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordMowers']").addEventListener('change', function()
    {document.getElementById('InsertRecordMowers_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordMowers']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordPlows']").addEventListener('change', function()
    {document.getElementById('InsertRecordPlows_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordPlows']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordTrailers']").addEventListener('change', function()
    {document.getElementById('InsertRecordTrailers_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordTrailers']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordTrucks']").addEventListener('change', function()
    {document.getElementById('InsertRecordTrucks_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordTrucks']").value.replaceAll(',', ', ')})
</script>

<script>
document.querySelector("input[id^='InsertRecordVacs']").addEventListener('change', function()
    {document.getElementById('InsertRecordVacs_Text').value = document.querySelector("input[id^='ComboBoxInsertRecordVacs']").value.replaceAll(',', ', ')})
</script>

From what I can tell - as soon as I change the field type in Caspio from Text Field to Hidden, the Event Listener doesnt get created. Which is odd, because the listener is targeted to the multi-select dropdown input, which wasnt changed.  Also, the first listener in the code above works just fine with the Equipment_Text field hidden. 

I have a triggered action that removes the commas from the text strings and insert individual rows for each selection, that is why I need a field to store the text string in, I just dont want them to appear on my submission form which is currently the only way I can get event listeners to work.

Any suggestions on how to set the values of a hidden field using a change event listener with a multi-select drop down being the source of the change?

 

 

[Tubby]

Try putting all your hidden fields together, set them all to Text Field, and add one HTML block on top and another on the bottom next to the last hidden field. Then disable HTML editor for both of the HTML blocks and add this:

Top HTML block:
<div style="display:none;"><div>

Bottom HTML block:
</div> </div>


Also make sure that your script is on the Footer.

[Tubby]

Caspio has a tech tip article for this method of hiding fields but I think the page is currently unavailable but here is the link anyway.
https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-hide-fields-in-datapages/

[ccalbreath]

2 hours ago, Tubby said:

Try putting all your hidden fields together, set them all to Text Field, and add one HTML block on top and another on the bottom next to the last hidden field. Then disable HTML editor for both of the HTML blocks and add this:

Top HTML block:
<div style="display:none;"><div>

Bottom HTML block:
</div> </div>


Also make sure that your script is on the Footer.

Thank You. This did it.