Jump to content

Cannot Populate Hidden Field


Recommended Posts

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?

 

 

Link to comment
Share on other sites

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>

image.png.d49e92cb814790c7671e3abca57fba74.png
Also make sure that your script is on the Footer.

Link to comment
Share on other sites

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>

image.png.d49e92cb814790c7671e3abca57fba74.png
Also make sure that your script is on the Footer.

Thank You. This did it. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...