[SOLVED] Element "B" inherit value from Element "A" in same Form with Javascript

[marcq]

Hi,

I have created a form with among others the 2 following groups (tabs).

1. Business Administrator Group
Name Administator
Address 1
Address 2
ZIP
etc.

2. Contact person
Name
Address 1
Address 2
ZIP
etc.

I would like the Elements from the "Contact person" group to inherit (be filled with) the value from the "Business Administrator" group Elements, since the same person can be both Business Admin and Contact person. The inherited data must be able to be modified if Business Admin and Contact person are not the same person.

Would be great if someone could explain me shortly how to do it with javascript.

Thanks a lot in advance,

Marc

 

[marcq]

I'm trying hard to solve this issue by myself.

I have created a js file in components/com_fabrik/js called form_1.js (1 his the id of the form in which I want to run the script).

I have read carrefully the following Fabrikar javascript wiki :

http://fabrikar.com/forums/index.php?wiki/javascript/

I have the following script in my js file :

* Ensure that Fabrik's loaded
 
requirejs(['fab/fabrik'], function () {
 
  // The block you want to use
  var blockRef = 'form_1';
 
  // Should we use an exact match for the blockRef?
  var exact = false;
 
  var form = Fabrik.getBlock(blockRef, exact, function (block) {
 
    // Elements which contains the values I want to inherit
    // The variable 'block' refers to Fabrik.blocks object that controls the form.
    var v1 = block.elements.get('gprh_fabrik_user_registration___se_adminname_1').get('value');
    var v2 = block.elements.get('gprh_fabrik_user_registration___se_address_1').get('value');
    var v3 = block.elements.get('gprh_fabrik_user_registration___se_address_2').get('value');
    var v4 = block.elements.get('gprh_fabrik_user_registration___se_zip').get('value');
    var v5 = block.elements.get('gprh_fabrik_user_registration___se_city').get('value');
 
  });
});

Is it the right way to start ?

Now I need to check if the checkbox is checked

I guess it is :

if (form.gprh_fabrik_user_registration___inherit.checked) { // element = 1

Is it correct ?

Then I need to inherit the values in my elements :

form.gprh_fabrik_user_registration___cp_name.value =  "var1";
form.gprh_fabrik_user_registration___cp_address_1.value =  "var2";
form.gprh_fabrik_user_registration___cp_address_2.value =  "var3";
form.gprh_fabrik_user_registration___cp_zip.value =  "var4";
form.gprh_fabrik_user_registration___cp_city.value =  "var5";

Is it correct ?

 

[marcq]

I have tried this but it doesn't work, I'm deeply stucked

function inheritcontact() {
//To get the checkbox value
var inherit = form_1.formElements.get('gprh_fabrik_user_registration___inherit').getValue();
//To get the value of the elements
var name = form_1.formElements.get('gprh_fabrik_user_registration___se_adminname_1').getValue();
var address1 = form_1.formElements.get('gprh_fabrik_user_registration___se_address_1').getValue();
var address2 = form_1.formElements.get('gprh_fabrik_user_registration___se_address_2').getValue();
var zip = form_1.formElements.get('gprh_fabrik_user_registration___se_zip').getValue();
var city = form_1.formElements.get('gprh_fabrik_user_registration___se_city').getValue();
 
 
if (inherit.get('value') == 1) {
 
form_1.formElements.get('gprh_fabrik_user_registration___cp_name').value =  'name';
form_1.formElements.get('gprh_fabrik_user_registration___cp_address_1').value =  'address1';
form_1.formElements.get('gprh_fabrik_user_registration___cp_address_2').value =  'address2';
form_1.formElements.get('gprh_fabrik_user_registration___cp_zip').value =  'zip';
form_1.formElements.get('gprh_fabrik_user_registration___cp_city').value =  'city';
}

 

[mudshark79]

Code looks like it could work (no pro and didn't test it) but you also need to trigger the execution of the function with some event (onclick of the inherit box for example) . So also read:

http://fabrikar.com/forums/index.php?wiki/element-javascript/

and

http://fabrikar.com/forums/index.php?wiki/element-javascript-advanced/#element-javascript-methods

shows you what you need to know for updating values via javascript.
Don't forget do do console-logging to know where your code may is stuck.
Hope I could help somehow.

Good Luck

 

[cheesegrits]

The code looks close. Try this:

function inheritcontact() {
  // get the form ref
  var form_1 = Fabrik.getBlock('form_1');
  //To get the checkbox value
  var inherit = form_1.formElements.get('gprh_fabrik_user_registration___inherit').getValue();
 
  if (inherit == 1) {
    //To get the value of the elements
    var name = form_1.formElements.get('gprh_fabrik_user_registration___se_adminname_1').getValue();
    var address1 = form_1.formElements.get('gprh_fabrik_user_registration___se_address_1').getValue();
    var address2 = form_1.formElements.get('gprh_fabrik_user_registration___se_address_2').getValue();
    var zip = form_1.formElements.get('gprh_fabrik_user_registration___se_zip').getValue();
    var city = form_1.formElements.get('gprh_fabrik_user_registration___se_city').getValue();
 
    // set the cp elements
    form_1.formElements.get('gprh_fabrik_user_registration___cp_name').update(name);
     form_1.formElements.get('gprh_fabrik_user_registration___cp_address_1').update(address1);
     form_1.formElements.get('gprh_fabrik_user_registration___cp_address_2').update(address2);
    form_1.formElements.get('gprh_fabrik_user_registration___cp_zip').update(zip);
    form_1.formElements.get('gprh_fabrik_user_registration___cp_city').update(city);
  }
}
 
windows.addEvent('fabrik.loaded', function() {
  inheritcontact();
});

Note that (assuming this works!) it will *always* update those 'cp' elements, if the checkbox is set, when the page loads.

-- hugh

 

[marcq]

Code looks like it could work (no pro and didn't test it) but you also need to trigger the execution of the function with some event (onclick of the inherit box for example) . So also read:

http://fabrikar.com/forums/index.php?wiki/element-javascript/

and

http://fabrikar.com/forums/index.php?wiki/element-javascript-advanced/#element-javascript-methods

shows you what you need to know for updating values via javascript.
Don't forget do do console-logging to know where your code may is stuck.
Hope I could help somehow.

Good Luck

Thanks a lot mudshark79, I have allready read this two wikis, but sometimes It's like reading zwahili for me. What is console logging ? Cheers Marc

 

[marcq]

Hi Hugh,

Thank a lot for your time and your script that I have copy-paste in my form_1.js file in the components/com_fabrik/js folder. It is ok for me if the cp elements always updated when checkbox is checked. If user wants to have another contact person, he will have to uncheck the checkbox and filling in a new contact person.

Regrettably it doesn't work. When user is filling in the se_ elements in the "Soci?t?-Exploitation" tab and then checking the checkbox in the "Personne de contact" tab, values are not inherited in the cp_ elements. I have checked the Elements names etc. all seems to be ok, so not clue what could be wrong.

If you have time, you can have a look at the public form :

http://webamazingapps.com/gprh.ch/index.php/membership

 

[mudshark79]

Thanks a lot mudshark79, I have allready read this two wikis, but sometimes It's like reading zwahili for me. What is console logging ? Cheers Marc

Ok. Console-Logging means a simple way of debugging javascript at runtime in the browser. Javascript didn't make any sense for me before I 'discovered' that with "console.log(XXX)" I can really take a look at the data-structure of a javascript object or variable. Take a look here:

http://stackoverflow.com/questions/...sages-in-the-google-chrome-javascript-console

This is somehow so basic that I felt embarrassed at first . Given the complexity of your form maybe you already debug your javasript differently ? For me, this really DID make the difference....

Then again: the other point I was making is, that without a trigger your javascript-function doesn't come to live. A trigger can be a click, mouseover or the DOM-Object being ready after loading the page. The

windows.addEvent('fabrik.loaded', function() {
inheritcontact();
});

part of hugh's code does exactly the latter but this is not so meaningful in your context. You should set up a trigger on your yes-no element, I would go with a "click"... there are some examples in the forum, wiki and ton's in the wider internet....

Regards,

Matthias

BTW: http://www.w3schools.com/ also was and is a good ressource for comprehension..

 

[marcq]

Thanks a lot guys it is working like a charm now !

Special thanks to Hugh for is marvelous script which works without any changes and special thanks also to Matthias which recall me to setup a trigger on my yes-no element.

Fantastic community which enable me to learn and improve my "poor" skills.

Cheers,

Marc