auto fill form according to dropdown choice, possible ?

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 !

Hi Repitol,

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

Bob

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

Hi Repitol,

This FAQ shows you one way to do it.

Bob

You're the king !
that's exactly what I was looking for.
thanks !

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")

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)

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

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

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

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();
    }
  });
});

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

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>

?

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

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...

Hi Repitol,

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

Bob

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 ?

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

Hi Repitol,

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

Bob

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

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