SmartCapture Form Not Submitting Values

Question

I'm trying to have the "Otro" option display a text-field so someone can provide more details.

I have a SmartCapture form on a CloudPage that has a checkbox field with several options, and one option being other. When other is selected I have some javascript that hides the other checkbox field and displays a text field. It submits just fine when I select other and put in a value in the text field. However, if I select anything else, the payload is just blank, nothing is being sent to the data extension. There's 3 fields that are setup in a similar manner and all of them behave the same way. The fields that don't have any javascript on them submit just fine, the issue is with the ones that do.

Here is my javascript function:

function showHideOtro1() {
 var checkBox = document.getElementById("master-dependent1");
 var text = document.getElementById("dependent1");
  
 if (checkBox.checked == true){
  text.style.display = "block";
  text.required = true;
 } else {
  text.style.display = "none";
  text.required = false; 
 }  
  
}

And here is the entire checkbox field:

<div class="smartcapture-controls"><div class="sc-formfield-label"><b>¿De los siguientes temas, cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023?</b> *</div>
<div class="sc-formfield-input-wrapper">

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Actualidad del Sistema de salud" required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Actualidad del Sistema de salud</label></div>

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Epidemiología del VIH " required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Mortalidad en UCI asociada a infecciones</label></div>

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Necesidades de las personas viviendo con VIH " required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Profilaxis en pacientes transplantados</label></div>



 <div class="sc-formfield-input"><label><input id="master-dependent1" onclick="showHideOtro1()" type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Otro" required="required" data-validation-message="Escriba aquí el otro tema">&nbsp;Otro</label></div>
  
  <div class="sc-formfield-input"><label for="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023"><input type="text" id="dependent1" style="display:none" placeholder="¿Cuál?" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" data-validation-message="Este campo es obligatorio."></label></div>  

</div>
</div>

Image of payload when other is NOT selected:

Is there something i've setup incorrectly with the formatting, or is there a more efficient way to construct this?

Answer 1

Ended up going in a slightly different direction and this solved my problem.

Instead of utilizing the same checkbox field to also input the reason for selecting Otro, I created an additional field in the data extension to accept the Otro response. The javascript needed a slight change to take action on the new field:

function showHideOtro1() {
 var checkBox = document.getElementById("master-dependent1");
 var text = document.getElementById("Otro1");
  
 if (checkBox.checked == true){
  text.style.display = "block";
  text.required = true;
 } else {
  text.style.display = "none";
  text.required = false; 
 }  
  
}

HTML for the field:

<div class="smartcapture-controls"><div class="sc-formfield-label"><b>¿De los siguientes temas, cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023?</b> *</div>
<div class="sc-formfield-input-wrapper">

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Actualidad del Sistema de salud" required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Actualidad del Sistema de salud</label></div>

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Epidemiología del VIH " required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Mortalidad en UCI asociada a infecciones</label></div>

 <div class="sc-formfield-input"><label><input type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" id="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Necesidades de las personas viviendo con VIH " required="required" data-validation-message="Este campo es obligatorio.">&nbsp;Profilaxis en pacientes transplantados</label></div>

 <div class="sc-formfield-input"><label><input id="master-dependent1" onclick="showHideOtro1()" type="checkbox" name="De los siguientes temas cuáles le gustaría que hicieran parte de la agenda académica de MSD para 2023" data-field-type="Text" value="Otro" required="required" data-validation-message="Escriba aquí el otro tema">&nbsp;Otro</label></div>
  
<div class="smartcapture-controls"><div class="sc-formfield-label"><label for="Otro1"></label></div>
<div class="sc-formfield-input"><input type="text" id="Otro1" placeholder="¿Cuál?" name="Otro1" style="display:none" data-field-type="Text"></div>
</div>  

</div>
</div>

This method allows me to accept multiple values in the checkbox field, including Otro and if Otro is selected the Otro1 field gets displayed and becomes required to fill out. When it's filled out the Otro input is recorded in the new Otro1 attribute in the data extension.