1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<script change:javascript="head 'modules.form.lib.js.form'"></script> <script change:javascript="head 'modules.website.lib.js.form-validation'"></script> <script type="text/javascript" tal:condition="php: count(jQueryConditionalElement) GT 0"> jQuery(document).ready(function() { <tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" /> // conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true"); }); </script> <script type="text/javascript"> if (form_Validation instanceof Array) { form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}}); } </script> <form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate"> <!-- NOTE: La classe '.isNode' se place sur un '.form-group' dont le champ (booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie. Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire. --> <!-- input type="text" --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <div id="field<field_id>" class=""> <label for="field_<field_id>" class="control-label required"></label> <input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" /> <p class="help-block"></p> </div> </div> --> <!-- input type="radio" --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <p class="">Votre demande concerne:</p> <div id="field<field_id>" class=""> <label class="" id="field_<field_id>_<incrementing_val>"> <input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" /> _label_text_here_ </label> </div> <p class="help-block"></p> </div> --> <!-- input type="file" --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <div id="field<field_id>" class=""> <label for="field_<field_id>" class="control-label required"></label> <input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" /> <p class="help-block"></p> </div> </div> --> <!-- select --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <div id="field<field_id>" class=""> <label for="field_<field_id>" class="control-label required"></label> <select class="form-control" name="formParam[recipientGroups]" id="field_<field_id>"> <option selected="selected" value="<field_id>_default">Sélectionner...</option> <option value="<field_id>_<incrementing_val>"></option> <option value="<field_id>_<incrementing_val>"></option> </select> <p class="help-block"></p> </div> </div> --> <!-- textarea --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <div id="field<field_id>" class=""> <label for="field_<field_id>" class="control-label required"></label> <textarea class="form-control" name="formParam[message]" id="field_<field_id>" cols="50" rows="10" /> <p class="help-block"></p> </div> </div> --> <!-- Boutons --> <!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>"> <input type="reset" class="btn btn-plus btn-poubelle" value="Annuler" /> <input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" /> </div> --> </form> |
form.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
var conditionalForm = { // hide zone clearZone : function(zone, fieldid) { // remove .inPath class starting from closest .form-group.isNode // (aka "clean path") jQuery('#groupe'+fieldid+'.form-group.isNode') .nextAll() .removeClass('inPath') .hide(); // hide selected zone jQuery('div#' + zone).each(function() { // hide sub zone that should be hidden jQuery(this).find('li.toHide').each(function() { jQuery(this).hide('normal'); }); jQuery(this).hide('normal'); }); // reset text inputs and selects, except radio and checkbox buttons jQuery('div#' + zone + ' :input').each(function() { jQuery(this).not(':radio, :checkbox').val(''); jQuery(this).removeAttr('checked').removeAttr('selected'); }); }, // manage fields controled by boolean checkbox inputs handleCheckboxBoolean : function(zone, fieldid, activationvalue) { jQuery('div#' + zone).css('display','none'); jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function() { if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue) { jQuery('div#' + zone).addClass('inPath').show('normal'); } else { conditionalForm.clearZone(zone, fieldid); } }).change(); }, // manage fields controled by checkbox inputs handleCheckbox : function(zone, fieldid, activationvalue) { jQuery('div#' + zone).css('display','none'); jQuery('label#' + fieldid + ' :checkbox').bind('click change', function() { if(jQuery(this).is(':checked')) { jQuery('div#' + zone).addClass('inPath').show('normal'); } else { conditionalForm.clearZone(zone, fieldid); } }).change(); }, // manage fields controled by list handleList : function(zone, fieldid, activationvalue) { jQuery('div#' + zone).css('display', 'none'); jQuery('select#' + fieldid).change(function () { jQuery('select#' + fieldid + ' option:selected').each(function() { if (jQuery(this).val() == activationvalue) { jQuery('div#' + zone).addClass('inPath').show('normal'); } else { conditionalForm.clearZone(zone, fieldid); } }); }).change(); }, // manage fields controled by radio inputs handleRadio : function(zone, fieldid, activationvalue) { jQuery('div#' + zone).css('display', 'none'); jQuery('div#field' + fieldid + ' :radio').bind('click change', function() { if (jQuery(this).is(':checked')) { if(jQuery(this).val() == activationvalue) { jQuery('div#' + zone).addClass('inPath').show('normal'); } else { conditionalForm.clearZone(zone, fieldid); } } }).change(); } }; var CAPTCHA = { reload : function(input, url) { input.setAttribute('src', this.buildCaptchaImageURL(url)) }, buildCaptchaImageURL : function(url) { return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random(); } }; |