Copy data between fields in CF 5

Hi,

I would appreciate some help as I spend a day trying to figure out what I'm doing wrong......
I want to copy the contents of fields as they might be the same for a child and mother (equally to shipping and billing adresses)

I've found this tutorial: https://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2690-how-can-i-automatically-copy-fields-from-one-part-of-my-form-to-another.html.

Which has the following code:

window.addEvent('domready', function() {
  var inputs;
  inputs = ['address', 'city', 'state'];
  inputs.each(function(item) {
    $('billing_' + item).addEvent('keyup', function(event) {
      var source, target_id;
      source = event.target;
      target_id = source.id.replace('billing_', 'shipping_');
      $(target_id).value = source.value;
    });
  });
});

What I figured is that this possibly has to do with the change from mootools to JQuery, but there I got stuck. Any one how can help me changing to code for CF5/Jommla 3.4?

Thanks in advance

Tjerk

Any chance someone willing to help here?
I would think I'm not the only one having this challange isnt it?

Best regards,

Tjerk

Hi Tjerk,

I have updated the FAQ to include jQuery code examples for CFv5.

Bob

Excellent Bob, thank you very much!

Dear Bob,

Sorry for bothering again.....

Here is my HTML (which is a copy of what you describe in the FAQ)

<div id="billing_data">
  <div class="gcore-line-tr gcore-form-row" id="ftr-billing_address">
    <div class="gcore-line-td" id="ftd-billing_address">
      <label for="billing_address" class="gcore-label-left">address</label>
      <div class="gcore-display-table gcore-input" id="fin-billing_address">
        <input name="billing_address" id="billing_address" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
  <div class="gcore-line-tr gcore-form-row" id="ftr-billing_city">
    <div class="gcore-line-td" id="ftd-billing_city">
      <label for="billing_city" class="gcore-label-left">billing_city</label>
      <div class="gcore-display-table gcore-input" id="fin-billing_city">
        <input name="billing_city" id="billing_city" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
  <div class="gcore-line-tr gcore-form-row" id="ftr-billing_state">
    <div class="gcore-line-td" id="ftd-billing_state">
      <label for="billing_state" class="gcore-label-left">billing_state</label>
      <div class="gcore-display-table gcore-input" id="fin-billing_state">
        <input name="billing_state" id="billing_state" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
</div>
<div id="shipping_data">
  <div class="gcore-line-tr gcore-form-row" id="ftr-shipping_address">
    <div class="gcore-line-td" id="ftd-shipping_address">
      <label for="shipping_address" class="gcore-label-left">shipping_address</label>
      <div class="gcore-display-table gcore-input" id="fin-shipping_address">
        <input name="shipping_address" id="shipping_address" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
  <div class="gcore-line-tr gcore-form-row" id="ftr-shipping_city">
    <div class="gcore-line-td" id="ftd-shipping_city">
      <label for="shipping_city" class="gcore-label-left">shipping_city</label>
      <div class="gcore-display-table gcore-input" id="fin-shipping_city">
        <input name="shipping_city" id="shipping_city" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
  <div class="gcore-line-tr gcore-form-row" id="ftr-shipping_state">
    <div class="gcore-line-td" id="ftd-shipping_state">
      <label for="shipping_state" class="gcore-label-left">shipping_state</label>
      <div class="gcore-display-table gcore-input" id="fin-shipping_state">
        <input name="shipping_state" id="shipping_state" value="" placeholder="" class="" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
      </div>
    </div>
  </div>
</div>
<div class="gcore-line-tr gcore-form-row" id="ftr-button10">
  <div class="gcore-line-td" id="ftd-button10">
    <div class="gcore-display-table gcore-input" id="fin-button10">
      <input name="button10" id="button10" type="submit" value="Submit" class="btn btn-default" style="" data-load-state="" />
    </div>
  </div>
</div>

And this is the Javascript which loads in the "on load" event (which is an exact copy of the FAQ for CF5

jQuery(document).ready(function (jQ) {
  var inputs;
  inputs = ['address', 'city', 'state'];
  inputs.each(function(item) {
    jQ('#billing_' + item).on('keyup', function() {
      var source, source_id, target_id;
      source = jQ(this);
      source_id = source.attr('id');
      target_id = source_id.replace('billing_', 'shipping_');
      jQ('#'+target_id).val(source.val());
    });
  });
});

Unfortunately I can't get it to work....What am I doing wrong? Probably something really stupid.......

Thanks in advance for answering my noob question.

Tjerk

Hi Tjerk,

Please post a link to the form so I can take a quick look. You can see my test form here

Bob

Hi Bob,

Please find the link below.

http://www.scoutinghellevoetsluis.nl/index.php?option=com_chronoforms5&chronoform=Speeltuin

Best regards,

Tjerk

Hi Tjerk,

Hmmm . . . I've upgraded to the same jQuery version and it is running OK. The only difference I can see is that I'm using jQuery Easy and so the loading sequence might be different.

There's also one change in the code that might work. Please try this version

jQuery(document).ready(function (jQ) {
  var inputs;
  inputs = ['address', 'city', 'state'];
  /*inputs.each(function(item) {*/ // remove this line
  jQ.each(inputs, function(i, item) { // add this line
    jQ('#billing_' + item).on('keyup', function() {
      var source, source_id, target_id;
      source = jQ(this);
      source_id = source.attr('id');
      target_id = source_id.replace('billing_', 'shipping_');
      jQ('#'+target_id).val(source.val());
    });
  });
});

Bob

Hi Tjerk,

I checked in Chrome and IE11 and it appears to be working OK?

Bob

Hi Bob,

It indeed works like a charm!
Almost ready with the complete form. A sneak preview can be found here: http://www.scoutinghellevoetsluis.nl/contact/inschrijfformulier-5

Once again, thanks for your help!

Tjerk