Can't edit Chronoforms labels for fields set as *Required

[Johnie]

Using GTranslate Pro (familytreesurrogacy.com), when I create a form using Chronoforms (chronoengine.com) the labels for the fields that are not set as "*Required" can be edited/translated but, on fields that I set as *Required, the GTranslate editor does not open when I click on the pencil (or cart) icon so I can't edit the labels for any fields marked *Required.

The following code is for a form field that is not marked as *Required and GTranslate opens the editor and works normally.

Code: Select all

<div id="form-row-phone" class="form-group gcore-form-row">
<label class="control-label gcore-label-left" for="phone">
<img class="gicons" width="12" height="12" md5="545e7b58e39d0150ada23844910522c8" title="Phone Number:" src="/gtranslate/edit.png">
<img class="gicons" width="12" height="12" md5cart="545e7b58e39d0150ada23844910522c8" title="Add to cart" src="/gtranslate/cart.png">
<span name="545e7b58e39d0150ada23844910522c8">Numero di telefono:</span>
</label>
<div id="fin-phone" class="gcore-input gcore-display-table">
<input id="phone" class="form-control A" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" size="" maxlength="" placeholder="" value="" name="phone">
</div>
</div>


The following code is for a form field that is marked as *Required and GTranslate does nothing when the pencil icon is clicked.

Code: Select all

<div id="form-row-ageegg" class="form-group gcore-form-row">
<label class="control-label gcore-label-left required_label" for="ageegg">
<img class="gicons" width="12" height="12" md5="f2a3a7966ebe331d8fffe59b79bb8491" title="Date of Birth:" src="/gtranslate/edit.png">
<img class="gicons" width="12" height="12" md5cart="f2a3a7966ebe331d8fffe59b79bb8491" title="Add to cart" src="/gtranslate/cart.png">
<span name="f2a3a7966ebe331d8fffe59b79bb8491">Data di nascita:</span>
<i class="fa fa-asterisk" style="color:#36A49D; font-size:9px; vertical-align:top;"></i>
</label>
<div id="fin-ageegg" class="gcore-input gcore-display-table">
<input id="ageegg" class="validate['required'] form-control A" type="text" data-tooltip="" data-load-state="" data-inputmask="" style="" title="" size="" maxlength="" placeholder="" value="" name="ageegg">
</div>
</div>


Except for the label and md5 id codes, I've changed the code in the few places that it's different in Firebug to make the code for the required form field the same as the one that is editable but it made no difference and clicking on the pencil icon still would not open the GTranslate editor.

[Johnie]

Update: When I click on the pencil icon to edit any of the labels for fields that are not *Required, the function:

Code: Select all

function openEdit(md5, orig)

writes the content in the source code as expected and the translation can be edited, but, when the field is *Required, it does not write the content in the source code.

Does anyone know what would cause this?

[Johnie]

I need help to figure out what is causing this problem in the GTranslate code but nobody has responded. Are there any other support options for the PRO/PAID version?

[Edvard]

Hi,

Please provide a link to your form, so I can check it for you.

Thanks!

[Johnie]

Hi,

Please provide a link to your form, so I can check it for you.

Thanks!

Here's a link to one of our forms Edvard, http://familytreesurrogacy.com/surrogates/surrogate-application

Thanks for your support. This is a really big issue for us because there's a lot of paperwork required in our industry so there are a lot of forms and since our business is global we have to translate each of them into multiple languages.

Thanks again,
Johnie

[Edvard]

Hi,

It seems that you have some javascript which blocks the edit interface. I would suggest doing the following to edit. You can use Google Chrome browser for edit purpose. Go to edit interface, for example: http://familytreesurrogacy.com/de/surro ... age_edit=1

Hit F12 to open the developer console, go to Console tab, paste this code and hit enter:

Code: Select all

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++) {
    if(imgs[i].getAttribute('md5')) imgs[i].onclick = function() {openEdit(this.getAttribute('md5'), this.getAttribute('title'));};
    else if(imgs[i].getAttribute('md5cart')) imgs[i].onclick = function() {addToBasket(this.getAttribute('md5cart'), '');};
}


After that you will be able to edit all the fields you want.

Every time you refresh or open a new form you need to run the javascript code one more time.

Thanks!

[Johnie]

Thanks for taking the time to resolve the problem I was having with all of the Chronoforms required fields Edvard. Your solution works perfectly!

[Edvard]

Good to hear that.

Thanks!