Forums

Hi!

I have a question about submitting a form after selecting multiple radiobuttons.
In my form I have 8 questions with the radio "yes" and "no".
I want that visitors only can hit the submit button when every question is answered with "yes" (first readiobutton)
I think I need some javascript to add to the onsubmit, but I don't know how to get it working.

Anyone have an idea?

thnx

Hi StefanJ,

Please post that part of your Form HTML here.

Bob

Hi Bob,

Thnx for the quick reply.
Here's the code:

<div class="ccms_form_element cfdiv_radio" id="autoID-f1f1ea4b819d1edfc5f8812c6bf9eea6_container_div"><label>Vraag 1</label><input type="hidden" name="vraag_1" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_1" id="vraag_1_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_1_ja">Ja</label>
<input type="radio" name="vraag_1" id="vraag_1_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_1_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_1"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-9fd789002e6e04060466c3d6fb5b9abe_container_div"><label>Vraag 2</label><input type="hidden" name="vraag_2" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_2" id="vraag_2_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_2_ja">Ja</label>
<input type="radio" name="vraag_2" id="vraag_2_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_2_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_2"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-24ff67bd4873ca54a214ddd61017f4fa_container_div"><label>Vraag 3</label><input type="hidden" name="vraag_3" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_3" id="vraag_3_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_3_ja">Ja</label>
<input type="radio" name="vraag_3" id="vraag_3_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_3_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_3"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-daea84ee8170f98f557af4e2f3a459ad_container_div"><label>Vraag 4</label><input type="hidden" name="vraag_4" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_4" id="vraag_4_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_4_ja">Ja</label>
<input type="radio" name="vraag_4" id="vraag_4_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_4_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_4"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-f0d93bf0863b0e2d0d043fcd80d8045a_container_div"><label>Vraag 5</label><input type="hidden" name="vraag_5" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_5" id="vraag_5_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_5_ja">Ja</label>
<input type="radio" name="vraag_5" id="vraag_5_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_5_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_5"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-d064d8c7f5007cf472ce29a19ef1958a_container_div"><label>Vraag 6</label><input type="hidden" name="vraag_6" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_6" id="vraag_6_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_6_ja">Ja</label>
<input type="radio" name="vraag_6" id="vraag_6_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_6_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_6"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-2bc068bfaf0a7f2e6378366b09aee5f7_container_div"><label>Vraag 7</label><input type="hidden" name="vraag_7" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_7" id="vraag_7_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_7_ja">Ja</label>
<input type="radio" name="vraag_7" id="vraag_7_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_7_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_7"></div></div><div class="ccms_form_element cfdiv_radio" id="autoID-6a8ace0c51d19ed84ac102b7d4524f49_container_div"><label>Vraag 8</label><input type="hidden" name="vraag_8" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="vraag_8" id="vraag_8_ja" title="" value="Ja" class="validate['required']" />
<label for="vraag_8_ja">Ja</label>
<input type="radio" name="vraag_8" id="vraag_8_nee" title="" value="Nee" class="validate['required']" />
<label for="vraag_8_nee">Nee</label>
</div><div class="clear"></div><div id="error-message-vraag_8"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-f4244b2c44a03e0463c8aee6a043db12_container_div"><input name="input_submit_2" class="" value="Verder" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_2"></div></div>

grtz

Stefan

Hi Stefan,

Add two Custom Element elements from the Advanced Group to the Preview box and move one before the first radio button and the other after the last one. Check the Pure Code box in both, in the first one put <div id='radio_group'> in the Code box and put </div> in the other.

Set the id of the Submit button element to submit_btn.

Drag a Load JS action from the Utilities action group into the On Load event and move it up before the Show HTML action. Add this code to it:

var radio_group;
window.addEvent('domready', function(){
  $('submit_btn').disabled = true;
  radio_group = $$('div#radio_group input[type=radio]');
  radio_group.each( function(item) {
    item.addEvent('click', checkRadio);
  });
});
function checkRadio() {
  var allow_submit, checked_radios;
  checked_radios = radio_group.filter( function(item) {
    return item.checked === true;
  });
  allow_submit = checked_radios.every( function(item) {
    return item.value == 'Ja';
  });
  if ( allow_submit ) {
    $('submit_btn').disabled = false;
  } else {
    $('submit_btn').disabled = true;
  }
}

You can see this working on my test form here. Though you may need some tweaks depending on how your form and template work in practice.

Bob