auto fill form according to dropdown choice, possible ?

Repitol 17 Jul, 2014
Hi again !
😶 I don't find the answer in the forum this time.

When user chooses one model thanks to a dropdown element
would it be possible to have some fields automatically filled ?

example :
model (dropdown choice)
Paris
London
Tokyo

if Paris, then some areas are already filled (France / Camembert / toujours l'amour)
if London, areas are filled like (England / Tea / rock n' roll)
...
is that possible ?
Thanks !
GreyHead 17 Jul, 2014
Hi Repitol,

Yes it is possible - where do the values 'Camembert / toujours l'amour' come from?

Bob
Repitol 18 Jul, 2014
Hi Bob,
these values (given as example) are attributes and can be coded in the form, somewhere - just tell me where -
user can choose from various models of one product
the product is leather handbag
models are Paris - London - Berlin - Perth - etc...
if he chooses Paris, he won't have to select the attributes (that I know and can code) these attributes will be automatically selected in the rest of the form.
I hope you understand🙂
Cheers
Repitol 18 Jul, 2014
You're the king !
that's exactly what I was looking for.
thanks !
Repitol 18 Jul, 2014
Well, I'm confused now
I can't reach what I want with the example of the fact - I miss something
could you please give me the code for my case ?
Model "Paris" gives in field "ornements" : "or"
Model "London" gives in fiels "ornements" : "bronze"
field Model is a drop down element (field name & Field ID = "Model")
field "ornements" is a text box (field name & Fiel ID = "ornement")
Repitol 18 Jul, 2014
and I can't use the example of the FAQ because when I copy/paste the code in the Option area of the dropdown configuration field, it is not taken into account (part of the code is erased after apply)
GreyHead 18 Jul, 2014
Hi Repitol,

It won't work in the Options box, use a Custom element from the Advanced group and put the Select HTML in that.

Bob
Repitol 21 Jul, 2014
Hi Bob
that's better but still doesn't work, I miss something
here's how I do it
Within "Container #4" : Custom code element name & ID "modele"
select name='modele' id='modele' . . . >
<option id="hide_none3" value="Palaiseau" capiton='or' > . . . </option>
. . .
</select>

Within div Container "serial_no_container_div"
Text Box "capiton" (name & ID)

LoadJS action :
window.addEvent('domready', function() {
  $('serial_no_container_div').hide();
  $('modele').addEvent('change', function() {
    var opt;
    opt = this.getSelected().getProperty('modele').toString();
    if ( opt.length > 0 ) {
      $('capiton').value = opt;
      $('serial_no_container_div').show();
    } else {
      $('capiton').value = '';
      $('serial_no_container_div').hide();
    }
  });
});


The preview shows for Modele field "..." with no other choice
GreyHead 23 Jul, 2014
Hi Repitol,

The FAQ has 'data-serial' both in the option and in the JavaScript 'opt = . . .' line. You have 'or' in one place and 'modele' in the other.

You should keep to the data-. . . format as attributes starting like that are valid HTML and an 'or' attribute is not.

If you have several values to pass I'd probably put them all into a single string (or a JSON object) and use the JavaScript to divide up the string and put the values where they are needed e.g. data-country='England#Tea#rock n\' roll'

Bob
Repitol 23 Jul, 2014
Hi Optimus Bob😉
thanks for your time on my case.
I'd tried this (but still remains with "..." in the dropdown form choice)
Where am I wrong please ?
1 : Custom Code element (name & ID "product-list") within container#4 area label
<select name='product-list' id='product-list' ... ><option id="hide_none3" value="Paris" data-city='Louvres' >...</option>...</select>

2 : Text Box element (name & ID "attribute") within serial_no_container_div area label (container type "Div")
3 : Load JS Action element
window.addEvent('domready', function() {
  $('serial_no_container_div').hide();
  $('product-list').addEvent('change', function() {
    var opt;
    opt = this.getSelected().getProperty('data-city').toString();
    if ( opt.length > 0 ) {
      $('attribute').value = opt;
      $('serial_no_container_div').show();
    } else {
      $('attribute').value = '';
      $('serial_no_container_div').hide();
    }
  });
});
GreyHead 23 Jul, 2014
Hi Repitol,

I've lost track of what you are trying to achieve here, The . . . shows because that is what you have set in your HTML <option>. . . </option> I assume that you want to put Paris in there instead of . . .

Bob
Repitol 24 Jul, 2014
Hi,
yes exactly. The fact is I'm not used to JS language, so I just copy/paste the code in the faq trying to render an approaching example.

So I have to write (for example)
<select name='product-list' id='product-list' ... ><option id="hide_none3" value="Paris" data-city='Louvres' >Paris</option>...</select>
<select name='product-list' id='product-list' ... ><option id="hide_none4" value="London" data-city='Big Ben' >London</option>...</select>
?
Repitol 24 Jul, 2014
Sorry, I made a mistake on the previous code I post. here is the good one
<select name='product-list' id='product-list' ... >
<option id="hide_none3" value="Paris" data-city='Louvres' >Paris</option>
<option id="hide_none4" value="London" data-city='Big Ben' >London</option>
</select>
but I can't display anything on the "serial_no" element called by 'data-city' JS Property
it stays empty whatever
Repitol 24 Jul, 2014
Hmmm... whan trying to create a database with my test I have this error "Field name "product-list" is invalid"
Maybe something I can change...
GreyHead 25 Jul, 2014
Hi Repitol,

I'd try removing the dash from the input and column name and use product_list or productList

Bob
Repitol 25 Jul, 2014
Hi Bob
I already renamed product-list as product_list
and tried a new test with a form copied on the FAQ model, but the serial_no element stays empty whatever the choice on product_list
maybe I haven't understood the process ?
when choosing "BRILLIANT SPA® - #0361" on the product_list element dropdown
it should display automatically "12345" within the serial_no input text element ?
Repitol 21 Aug, 2014
Hi,
I'm back after some "rest under rain" holidays with my problem.
Previously on that post :
I'd try to copy the example shown on the FAQ, but the serial_no element stays empty.
I can't reproduce the exampe with other datas. I miss something but don't know what.
Thanks if you can help.
Regards
GreyHead 21 Aug, 2014
Hi Repitol,

Please post a link to the form so I can take a quick look.

Bob
Repitol 21 Aug, 2014
Hi Bob,
http://www.3emecoupefranceskige.fr/index.php?option=com_chronoforms&chronoform=TEST

if you need admin access, I can send it by PM

Repitol
GreyHead 25 Aug, 2014
Hi Repitol,

The show() and hide() methods require MooTools More and the library doesn’t appear to be being loaded on your site. I can only see the MooTools Core file. Please check the settings in the MooTools Uograde plug-in and/or the template settings.

If necessary you can adapt the code to work without MooTools More by using CSS changes instead.

Bob
This topic is locked and no more replies can be posted.