Hello,
I have the following problem in Chronoforms v5:
A product is to be configured in a form. Different values can be selected via dropdown or radio box:
Selection A:
A1
A2
Selection B:
B1
B2
Selection C:
C1
C2
Selection D:
D1
D2
D3
D4
A text box should summarize the values to an article number - before the form is sent - and show them in a text box. Ideally without an additional database deposit.
The article number can be composed of the individual values (e.g. A1=222, B2=555, C1=888, D3=777 becomes 222-555-888-777). Or the article number can be adjusted by using a table (e.g. A1 |B2 |C1 |D3 | 222-555-888-777).
Is this possible?
I have the following problem in Chronoforms v5:
A product is to be configured in a form. Different values can be selected via dropdown or radio box:
Selection A:
A1
A2
Selection B:
B1
B2
Selection C:
C1
C2
Selection D:
D1
D2
D3
D4
A text box should summarize the values to an article number - before the form is sent - and show them in a text box. Ideally without an additional database deposit.
The article number can be composed of the individual values (e.g. A1=222, B2=555, C1=888, D3=777 becomes 222-555-888-777). Or the article number can be adjusted by using a table (e.g. A1 |B2 |C1 |D3 | 222-555-888-777).
Is this possible?
Hi sub_mar,
Yes, it's possible. You need to use Custom JavaScript to combine the strings into an article number. That is probably simplest if you can set the 222 strings as values in the drop-downs.
You can display the article number in a read only text input. That will submit with the form data BUT you should check the value using PHP after submission as JavaScript in the browser is always open to 'user interference'.
Bob
Yes, it's possible. You need to use Custom JavaScript to combine the strings into an article number. That is probably simplest if you can set the 222 strings as values in the drop-downs.
You can display the article number in a read only text input. That will submit with the form data BUT you should check the value using PHP after submission as JavaScript in the browser is always open to 'user interference'.
Bob
Hi GreyHead,
thank you for the quick reply!
Could you please help me with the coding? I am a totally beginner with JavaScript an PHP.
sub_mar
thank you for the quick reply!
Could you please help me with the coding? I am a totally beginner with JavaScript an PHP.
sub_mar
Hi sub_mar,
I can't help you right away, my main internet was taken out in a thunderstorm and I'm working through my phone which is not a good coding environment. If you want to send me the details in a PM I can look when my connection is fixed.
Bob
I can't help you right away, my main internet was taken out in a thunderstorm and I'm working through my phone which is not a good coding environment. If you want to send me the details in a PM I can look when my connection is fixed.
Bob
unfortunately I can't send any PMs yet, so here's the form in HTML (anonymous):
[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">[br] <h4>Model ColorA</h4>[br] <img alt="ColorA" src="http://placekitten.com/1600/400">[br] </div>[br] <div class="colorb" id="colorb" data-load-state="hidden">[br] <h4>Model ColorB</h4>[br] <img alt="ColorA" src="http://placekitten.com/1600/450">[br] </div>[br] </div>[br] <div class="chronoform-container" id="chronoform-container-277" style="float:left; width:24%">[br] <h4>Things</h4>[br] <h5>First</h5>[br] <div class="gcore-input-wide gcore-display-table" id="fin-absehen">[br] <div class="gcore-single-column" id="fclmn">[br] <div class="gcore-radio-item form-absehen-left" id="fitem">[br] <label class="control-label gcore-label-checkbox" for="absehen">[br] <input name="absehen" title="" class="auswahl-absehen A" id="absehen" style="" type="radio" value="415-" data-load-state="" data-tooltip="">[br] ThingD<br />[br] <img alt="ThingD" src="http://placekitten.com/190/190" />[br] </label>[br] </div>[br] <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['number'] 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>[/pre]
The configured article contains 123- (=Model) in every way and the Customer can't choose it anywere.[br][br]The Order for the article number is: Model + Color + Thing + Part
do you need other information
[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">[br] <h4>Model ColorA</h4>[br] <img alt="ColorA" src="http://placekitten.com/1600/400">[br] </div>[br] <div class="colorb" id="colorb" data-load-state="hidden">[br] <h4>Model ColorB</h4>[br] <img alt="ColorA" src="http://placekitten.com/1600/450">[br] </div>[br] </div>[br] <div class="chronoform-container" id="chronoform-container-277" style="float:left; width:24%">[br] <h4>Things</h4>[br] <h5>First</h5>[br] <div class="gcore-input-wide gcore-display-table" id="fin-absehen">[br] <div class="gcore-single-column" id="fclmn">[br] <div class="gcore-radio-item form-absehen-left" id="fitem">[br] <label class="control-label gcore-label-checkbox" for="absehen">[br] <input name="absehen" title="" class="auswahl-absehen A" id="absehen" style="" type="radio" value="415-" data-load-state="" data-tooltip="">[br] ThingD<br />[br] <img alt="ThingD" src="http://placekitten.com/190/190" />[br] </label>[br] </div>[br] <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['number'] 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>[/pre]
The configured article contains 123- (=Model) in every way and the Customer can't choose it anywere.[br][br]The Order for the article number is: Model + Color + Thing + Part
do you need other information
Edit: the article number should actually appear in the text box article number.
<div>Hi Bob,<br><br>I now have a script that will definitely work local. I already tested it.</div><div></div><pre class="ui message cfu-code" style="overflow:auto; border:none;"><script><br> function fillTextBox() {<br> var txt = '123-';<br> txt += document.getElementById("farbe").value;<br> <br> var ele = document.getElementsByName('absehen'); <br> <br> for(i = 0; i < ele.length; i++) { <br> if(ele[i].checked) <br> txt += ele[i].value;; <br> } <br> txt += document.getElementById("tuerme").value;<br> document.getElementById('artikelnummer').value=txt;<br> };<br></script></pre><div></div><div>I have to insert the script snippet into an OnLoad event, I already found out that much (source: https://www.chronoengine.com/faqs/54-chronoforms/cfv4/cfv4-validation/2597-how-can-i-add-javascript-to-my-form).<br><br>However, none of the specified variants work:<br></div><pre class="ui message cfu-code" style="overflow:auto; border:none;">function fillTextBox() {<br> var txt = '123-';<br> txt += document.getElementById("farbe").value;<br> <br> var ele = document.getElementsByName('absehen'); <br> <br> for(i = 0; i < ele.length; i++) { <br> if(ele[i].checked) <br> txt += ele[i].value;; <br> } <br> txt += document.getElementById("tuerme").value;<br> document.getElementById('artikelnummer').value=txt;<br> };</pre><div></div><div>or</div><div></div><pre class="ui message cfu-code" style="overflow:auto; border:none;">window.addEvent('domready', function() {<br> <br><br> function fillTextBox() {<br> var txt = '123-';<br> txt += document.getElementById("farbe").value;<br> <br> var ele = document.getElementsByName('absehen'); <br> <br> for(i = 0; i < ele.length; i++) { <br> 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><br>});</pre><div></div><div>or</div><div></div><pre class="ui message cfu-code" style="overflow:auto; border:none;"><?php<br>$script = "<br> <br><br> function fillTextBox() {<br> var txt = '123-';<br> txt += document.getElementById("farbe").value;<br> <br> var ele = document.getElementsByName('absehen'); <br> <br> for(i = 0; i < ele.length; i++) { <br> 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><br>";<br>$doc =& JFactory::getDocument();<br>$doc->addScriptDeclaration($script);<br>?></pre><div></div><div>What am I doing wrong?<br><br>sub_mar</div>
Hi sub_mar,
You can load the JavaScript using a Custom JS action in the form On Load event (before the HTML render form action).
You then need to call the function which you can do from the Events tabs of the input elements using the On Change event.
Bob
You can load the JavaScript using a Custom JS action in the form On Load event (before the HTML render form action).
You then need to call the function which you can do from the Events tabs of the input elements using the On Change event.
Bob
Hi Bob,
thank you so much for your help. It works now🙂
Have a nice day!
sub_mar
thank you so much for your help. It works now🙂
Have a nice day!
sub_mar
Hi Bob,
Okay, I have another problem:
My form 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. Thanks to your help this also works great. Because one post is somehow broken, here again the working script:
[pre]<script>
function fillTextBox() {
var txt = '123-';
txt += document.getElementById("farbe").value;
var ele = document.getElementsByName('absehen');
for(i = 0; i < ele.length; i++) { [br] if(ele[i].checked) [br] txt += ele[i].value;; [br] } [br] txt += document.getElementById("tuerme").value;[br] document.getElementById('artikelnummer').value=txt;[br] };[br]</script>[/pre]
But now it's desired that the form should be enclosed with a multiplier. So it should be possible to configure several products.
I have already dealt with your FAQ: https://www.chronoengine.com/faqs/70-chronoforms/cfv5/5245-how-can-i-use-the-multiplier-in-cfv5
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:
Replacer: __N__
Counter: 1
Hide first: No (if it is set to Yes, the "hide" and "show" events will not work anymore)
Disable first: No (if it is set to Yes, the "hide" and "show" events no longer work)
Hide buttons: No
Start count: 1
Data path: zf (I'm not sure if I have to put anything here at all, because I'm not uploading anything additionally)
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.
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]What is the error?
sub_mar
Okay, I have another problem:
My form 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. Thanks to your help this also works great. Because one post is somehow broken, here again the working script:
[pre]<script>
function fillTextBox() {
var txt = '123-';
txt += document.getElementById("farbe").value;
var ele = document.getElementsByName('absehen');
for(i = 0; i < ele.length; i++) { [br] if(ele[i].checked) [br] txt += ele[i].value;; [br] } [br] txt += document.getElementById("tuerme").value;[br] document.getElementById('artikelnummer').value=txt;[br] };[br]</script>[/pre]
But now it's desired that the form should be enclosed with a multiplier. So it should be possible to configure several products.
I have already dealt with your FAQ: https://www.chronoengine.com/faqs/70-chronoforms/cfv5/5245-how-can-i-use-the-multiplier-in-cfv5
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:
Replacer: __N__
Counter: 1
Hide first: No (if it is set to Yes, the "hide" and "show" events will not work anymore)
Disable first: No (if it is set to Yes, the "hide" and "show" events no longer work)
Hide buttons: No
Start count: 1
Data path: zf (I'm not sure if I have to put anything here at all, because I'm not uploading anything additionally)
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.
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]What is the error?
sub_mar
Hi sub_mar,
My guess is that the built-in JavaScript for the Hide and Show events doesn't recognise the _N_ replacer. So you'd need to do this using custom code.
Do you need to have this complex multiplier in one page - could you instead accept the first submission and then re-display the form for the next one? That might be simpler to build and manage.
Bob
My guess is that the built-in JavaScript for the Hide and Show events doesn't recognise the _N_ replacer. So you'd need to do this using custom code.
Do you need to have this complex multiplier in one page - could you instead accept the first submission and then re-display the form for the next one? That might be simpler to build and manage.
Bob
Hi, Bob,
can you explain to me in more detail how I can implement your second proposal?
sub_mar
can you explain to me in more detail how I can implement your second proposal?
sub_mar
Hi Bob,
I now understand your second proposal. No, I think our customers didn't want to send us multiple Formulars.
It should be easy to manage for our costumers.
to your guess: I think, that this is the problem, too. But I don't know, how to solve the problem.
Which code should be customized?
sub_mar
I now understand your second proposal. No, I think our customers didn't want to send us multiple Formulars.
It should be easy to manage for our costumers.
to your guess: I think, that this is the problem, too. But I don't know, how to solve the problem.
Which code should be customized?
sub_mar
Hi sub_mar,
I'm not clear why it is more difficult for your customers to select one item after another - that's a bit like a shopping cart :-(
Please see this FAQ for an example that I think is something like what you want.
Using your browser developer tools and maybe the ChronoForms Debugger output you should be able to see exactly what input names and data are and write your code to match.
Bob
I'm not clear why it is more difficult for your customers to select one item after another - that's a bit like a shopping cart :-(
Please see this FAQ for an example that I think is something like what you want.
Using your browser developer tools and maybe the ChronoForms Debugger output you should be able to see exactly what input names and data are and write your code to match.
Bob
This topic is locked and no more replies can be posted.
