Forums

Hi,

I made a form with the wizard designer, which now runs like a configurator. If I select a drop-down, an image (hidden div) will be shown. I solved this with the events "show and hide".

In addition there is the working javascript, which merges all selections in a textbox.

But now it's desired that the form should be enclosed with a multiplier. So it should be possible to configure several products.
​
Part of the form which has to be multiplied :[pre]<div class="chronoform-container" id="chronoform-container-275" style="overflow:auto;">
<div class="chronoform-container" id="chronoform-container-276" style="float:left; width:74%">
<div class="colora" id="colora" data-load-state="hidden">
<h4>Model ColorA</h4>
<img alt="ColorA" src="http://placekitten.com/1600/400">
</div>
<div class="colorb" id="colorb" data-load-state="hidden">
<h4>Model ColorB</h4>
<img alt="ColorA" src="http://placekitten.com/1600/450">
</div>
</div>
<div class="chronoform-container" id="chronoform-container-277" style="float:left; width:24%">
<h4>Things</h4>
<h5>First</h5>
<div class="gcore-input-wide gcore-display-table" id="fin-absehen">
<div class="gcore-single-column" id="fclmn">
<div class="gcore-radio-item form-absehen-left" id="fitem">
<label class="control-label gcore-label-checkbox" for="absehen">
<input name="absehen" title="" class="auswahl-absehen A" id="absehen" style="" type="radio" value="415-" data-load-state="" data-tooltip="">
ThingD<br />
<img alt="ThingD" src="http://placekitten.com/190/190" />
</label>
</div>
<div class="gcore-radio-item form-absehen-right" id="fitem1">[br] <label class="control-label gcore-label-checkbox" for="absehen1">[br] <input name="absehen" title="" class="auswahl-absehen A" id="absehen1" style="" type="radio" value="131-" data-load-state="" data-tooltip="">[br] ThingC<br />[br] <img alt="ThingC" src="http://placekitten.com/190/190" />[br] </label>[br] </div>[br] <div class="gcore-radio-item form-absehen-left" id="fitem2">[br] <label class="control-label gcore-label-checkbox" for="absehen2">[br] <input name="absehen" title="" class="auswahl-absehen A" id="absehen2" style="" type="radio" value="112-" data-load-state="" data-tooltip="">[br] ThingB<br />[br] <img alt="ThingB" src="http://placekitten.com/190/190" />[br] </label>[br] </div>[br] <div class="gcore-radio-item form-absehen-right" id="fitem3" >[br] <label class="control-label gcore-label-checkbox" for="absehen3">[br] <input name="absehen" title="" class="auswahl-absehen A" id="absehen3" style="" type="radio" value="101-" data-load-state="" data-tooltip="">[br] ThingA<br />[br] <img alt="ThingA" src="http://placekitten.com/190/190" />[br] </label>[br] </div>[br] </div>[br] </div>[br] </div>[br]</div>[br]<div style="clear:both;"></div>[br]<div class="chronoform-container" id="chronoform-container-329" style="overflow:auto;">[br] <div class="chronoform-container" id="chronoform-container-330" style="float:left; width:32%">[br] <div class="form-group gcore-form-row" id="form-row-tuerme">[br] <label for="tuerme" class="control-label gcore-label-left">[br] Part[br] </label>[br] <div class="gcore-input gcore-display-table" id="fin-tuerme">[br] <select name="tuerme" id="tuerme" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">[br] <option value="161">PartA</option>[br] <option value="718">PartB</option>[br] </select>[br] </div>[br] </div>[br] <div class="parta" id="parta" data-load-state="hidden">[br] <img alt="PartA" src="http://placekitten.com/400/300">[br] </div>[br] <div class="partb" id="partb" data-load-state="hidden">[br] <img alt="PartB" src="http://placekitten.com/450/300">[br] </div>[br] </div>[br] <div class="chronoform-container" id="chronoform-container-366" style="float:left; width:32%">[br] <div class="form-group gcore-form-row" id="form-row-farbe">[br] <label for="farbe" class="control-label gcore-label-top">[br] Color[br] </label>[br] <div class="gcore-input-wide gcore-display-table" id="fin-farbe">[br] <select name="farbe" id="farbe" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">[br] <option value="456-">ColorA</option>[br] <option value="789-">ColorB</option>[br] </select>[br] </div>[br] </div>[br] <div class="form-group gcore-form-row" id="form-row-anzahl">[br] <label for="anzahl" class="control-label gcore-label-top">[br] Quantity[br] </label>[br] <div class="gcore-input-wide gcore-display-table" id="fin-anzahl">[br] <input name="anzahl" id="anzahl" value="" placeholder="" class="validate[&#039;number&#039;] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />[br] </div>[br] </div>[br] </div>[br] <div class="chronoform-container" id="chronoform-container-347" style="float:left; width:32%">[br] <div class="form-group gcore-form-row" id="form-row-artikelnummer">[br] <label for="artikelnummer" class="control-label gcore-label-top">[br] Article Number[br] </label>[br] <div class="gcore-input-wide gcore-display-table" id="fin-artikelnummer">[br] <input name="artikelnummer" id="artikelnummer" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />[br] </div>[br] </div>[br] <div class="form-group gcore-form-row" id="form-row-sonstiges">[br] <label for="sonstiges" class="control-label gcore-label-top">[br] Others:[br] </label>[br] <div class="gcore-input-wide gcore-display-table" id="fin-sonstiges">[br] <textarea name="sonstiges" id="sonstiges" placeholder="" rows="3" cols="40" class="form-control A" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea>[br] </div>[br] </div>[br] </div>[br]</div>[br][/pre]
​
Javascript:

 function fillTextBox() {
 var txt = '123-';
 txt += document.getElementById("farbe").value;
 
 var ele = document.getElementsByName('absehen'); 
              
            for(i = 0; i < ele.length; i++) { 
                if(ele[i].checked) [br]                txt += ele[i].value;; [br]            } [br] txt += document.getElementById("tuerme").value;[br] document.getElementById('artikelnummer').value=txt;[br] };[br]

[br]I have already work with your FAQ: https://www.chronoengine.com/faqs/70-chronoforms/cfv5/5245-how-can-i-use-the-multiplier-in-cfv5[br][br]I created the containers multiplier and multiplier-contents and put the rest of the form there (with multi-columns). Then I created the settings of the multiplier-container as follows:[br]Replacer: __N__[br]Counter: 1[br]Hide first: No (if it is set to Yes, the "hide" and "show" events will not work anymore)[br]Disable first: No (if it is set to Yes, the "hide" and "show" events no longer work)[br]Hide buttons: No[br]Start count: 1[br]Data path: zf (I'm not sure if I have to put anything here at all, because I'm not uploading anything additionally)[br][br]If I save now, the form works normally, but the show and hide functions only change for the first form, even if I use the dropdowns in the second form.[br][br]Now I have added __N__ for all form fields and the divs behind the ID and the name, also in the events. After that neither the Javascript works nor the motives change after selecting the dropdowns.[br][br]What is the error?[br]