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?
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
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
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
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
Hi Bob,
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
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
Hi, Bob,
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
