[Resolved] Customise the placeholder text for Maps fields on a Post Form?

[Author]

Posts

[Minesh]

As shared before:

You should add the code I shared to your post form's custom Javascript editor section:

function get_current_lang_code_from_cookie(c_name) {
       var c_value = document.cookie,
           c_start = c_value.indexOf(" " + c_name + "=");
       if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
       if (c_start == -1) {
           c_value = null;
       } else {
           c_start = c_value.indexOf("=", c_start) + 1;
           var c_end = c_value.indexOf(";", c_start);
           if (c_end == -1) {
               c_end = c_value.length;
           }
           c_value = unescape(c_value.substring(c_start, c_end));
       }
       return c_value;
   }
 
current_lang_code = get_current_lang_code_from_cookie('wp-wpml_current_language');
 
if(current_lang_code == 'en'){

    var placeholder = jQuery("input[name*='wpcf-nanny-approximate-location']");
if( ! jQuery( placeholder ).val() ) { 
    jQuery( placeholder ).attr("placeholder", "Use postcode, area, or street eg 80801 Munich, Giesing, Bahnhofstraße");
};

} else if  (current_lang_code == 'de') {
/// add the JS code to replace the placeholder in German text
}

The same way you can adjust the text for your post_title field as well.

[simonM-5]

HI Minesh

I added the following code to the JS section of the Post Form "Post Form - New Job Ad".

Unfortunately it works in neither English nor German, also after clearing the WP Rocket cache.

Kind regards
Simon

// Added to enable translation of placeholder texts for post-title and address location fields
function get_current_lang_code_from_cookie(c_name) {
       var c_value = document.cookie,
           c_start = c_value.indexOf(" " + c_name + "=");
       if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
       if (c_start == -1) {
           c_value = null;
       } else {
           c_start = c_value.indexOf("=", c_start) + 1;
           var c_end = c_value.indexOf(";", c_start);
           if (c_end == -1) {
               c_end = c_value.length;
           }
           c_value = unescape(c_value.substring(c_start, c_end));
       }
       return c_value;
   }
  
current_lang_code = get_current_lang_code_from_cookie('wp-wpml_current_language');
  
if(current_lang_code == 'en'){
    var placeholder = jQuery("input[name*='post-title']");
if( ! jQuery( placeholder ).val() ) { 
    jQuery( placeholder ).attr("placeholder", "eg Evening babysitter, English-speaking nanny, Spanish tutor");
};
    var placeholder = jQuery("input[name*='wpcf-nanny-approximate-location']");
if( ! jQuery( placeholder ).val() ) { 
    jQuery( placeholder ).attr("placeholder", "Use postcode, area, or street eg 80801 Munich, Giesing, Bahnhofstraße");
}; 
 
} else if  (current_lang_code == 'de') {
    var placeholder = jQuery("input[name*='post-title']");
if( ! jQuery( placeholder ).val() ) { 
    jQuery( placeholder ).attr("placeholder", "z.B. Abend-Babysitter, englischsprachige Nanny, Spanisch-Nachhilfelehrer");
};
    var placeholder = jQuery("input[name*='wpcf-nanny-approximate-location']");
if( ! jQuery( placeholder ).val() ) { 
    jQuery( placeholder ).attr("placeholder", "PLZ, Ort oder Straße verwenden, z.B. 80801 München, Giesing, Bahnhofstraße");
}; 

}

[Minesh]

I've adjusted the code added to custom JS editor of your form as given under:

jQuery(document).ready(function(){
	
  setTimeout( delayed, 2000 );  
  
    var current_lang_code = jQuery('html').attr('lang');  
  
	var placeholder_title = jQuery("input[name*='post_title']");
	var placeholder_location = jQuery("input[name*='wpcf-family-approximate-location']");
  
    if(current_lang_code == 'en-GB'){    

        jQuery( placeholder_title ).attr("placeholder", "eg Evening babysitter, English-speaking nanny, Spanish tutor");
        jQuery( placeholder_location ).attr("placeholder", "Use postcode, area, or street eg 80801 Munich, Giesing, Bahnhofstraße"); 

    } else if  (current_lang_code == 'de-DE') {

        jQuery( placeholder_title ).attr("placeholder", "z.B. Abend-Babysitter, englischsprachige Nanny, Spanisch-Nachhilfelehrer");
        jQuery( placeholder_location ).attr("placeholder", "PLZ, Ort oder Straße verwenden, z.B. 80801 München, Giesing, Bahnhofstraße");
    }
  
});

Please clear the browser and server cache if any and then try to test I hope it should work as expected.

[simonM-5]

Hi Minesh

That's great, thank you. I applied it successfully to the Post Form "Post Form - New Job Ad" and it works great now in English and German.

However, adding the same code to "Post Form - Edit Job Ad" does NOT work. It seems to want something different in the edit modes of the Forms.

Any ideas?

Kind regards
Simon

[Minesh]

Can you please check now.

I've adjusted the JS code added to your Edit form as given under:

jQuery(document).ready(function(){
	
	var current_lang_code = jQuery('html').attr('lang');  
	var placeholder_title = jQuery("input[name*='post_title']");
	var placeholder_location = jQuery("input[name*='wpcf-family-approximate-location']");

	if(current_lang_code == 'en-GB'){
		jQuery( placeholder_title ).attr("placeholder", "eg Evening babysitter, English-speaking nanny, Spanish tutor");
		jQuery( placeholder_location ).attr("placeholder", "Use postcode, area, or street eg 80801 Munich, Giesing, Bahnhofstraße"); 
	} else if  (current_lang_code == 'de-DE') {
		jQuery( placeholder_title ).attr("placeholder", "z.B. Abend-Babysitter, englischsprachige Nanny, Spanisch-Nachhilfelehrer");
		jQuery( placeholder_location ).attr("placeholder", "PLZ, Ort oder Straße verwenden, z.B. 80801 München, Giesing, Bahnhofstraße");
	}
});

Can you please confirm it works as expected now.

[simonM-5]

HI Minesh

Great, it appears to work in the Edit mode now too. However I would like to test it on various browsers and devices to be sure before I close the ticket.

One question: it looks like you just removed the

	setTimeout( delayed, 2000 );

from the Edit version, right?

Can you explain why the setTimeout is necessary for the "Create" versions of the forms, but not the "Edit" versions? As far as I understand, it just delays the execution of the JS function by 2 seconds. Why is that delay necessary for the "Create" forms?

Thanks and best regards
Simon

[Minesh]

One question: it looks like you just removed the

setTimeout( delayed, 2000 );

from the Edit version, right?
===>
Yes, thats correct.

Can you explain why the setTimeout is necessary for the "Create" versions of the forms, but not the "Edit" versions? As far as I understand, it just delays the execution of the JS function by 2 seconds. Why is that delay necessary for the "Create" forms?
==>
Actually - I'm not sure as I did not added that code and I'm not aware about it. It was missing the function "delayed" on edit form so I just removed it.

[simonM-5]

Hi Minesh

You specified the delay code a few replies ago:
https://toolset.com/forums/topic/customise-the-placeholder-text-for-maps-fields-on-a-post-form/page/2/#post-2675479

however I don't think it comes orginally from you, rather it comes originally from a previous ticket originally from Christian Cox. He refers to it again here:
https://toolset.com/forums/topic/date-pickers-appear-empty-in-toolset-forms-edit-mode/page/2/#post-1878477

If the delay is NOT included, then the Google AutoComplete suggestions fail to limit the suggestions to German addresses only on the Edit forms, so it is essential to keep the delay on the Edit forms.

Kind regards
Simon

[Minesh]

Ok - so its on you if you want to keep using that function or not on your edit form as well.

You're welcome to mark resolve this ticket thereafter 🙂

[simonM-5]

HI Minesh

I'm sorry, I don't see this ticket as resolved. I still need a resolution of how to display translatable placeholder text reliably in both languages on the edit forms, without breaking existing other solutions already provided by Toolset.

Kind regards
Simon

[Minesh]

Sorry but I already shared solution on add form and edit form and it was working and even you acknowledged that.

The code line which is commented is by mistake took from the add form when you try to paste the same custom JS code on the edit form.

[simonM-5]

HI Minesh

In https://toolset.com/forums/topic/customise-the-placeholder-text-for-maps-fields-on-a-post-form/page/2/#post-2675759 I wrote:
"it appears to work in the Edit mode now too. However I would like to test it on various browsers and devices to be sure before I close the ticket."

On further testing, I discovered that your solution of removing the setTimeout( delayed, 2000 ); code line broke existing working functionality, so it is not a viable solution to the ticket, I'm afraid.

Thanks and regards
Simon

[Minesh]

On further testing, I discovered that your solution of removing the setTimeout( delayed, 2000 ); code line broke existing working functionality, so it is not a viable solution to the ticket, I'm afraid.
===>
The thing is that I did not added the setTimeout( delayed, 2000 ); function - I just added the javascript solution I shared:

Query(document).ready(function(){
     
    var current_lang_code = jQuery('html').attr('lang');  
    var placeholder_title = jQuery("input[name*='post_title']");
    var placeholder_location = jQuery("input[name*='wpcf-family-approximate-location']");
 
    if(current_lang_code == 'en-GB'){
        jQuery( placeholder_title ).attr("placeholder", "eg Evening babysitter, English-speaking nanny, Spanish tutor");
        jQuery( placeholder_location ).attr("placeholder", "Use postcode, area, or street eg 80801 Munich, Giesing, Bahnhofstraße"); 
    } else if  (current_lang_code == 'de-DE') {
        jQuery( placeholder_title ).attr("placeholder", "z.B. Abend-Babysitter, englischsprachige Nanny, Spanisch-Nachhilfelehrer");
        jQuery( placeholder_location ).attr("placeholder", "PLZ, Ort oder Straße verwenden, z.B. 80801 München, Giesing, Bahnhofstraße");
    }
});

If the setTimeout() is already added to your both add/edit form you should just add it accordingly.

[simonM-5]

Hi Minesh

Apologies if there have been any misunderstandings. I understand that you didn't ADD the setTimeout( delayed, 2000 ); however in your reply

https://toolset.com/forums/topic/customise-the-placeholder-text-for-maps-fields-on-a-post-form/page/2/#post-2675479

you did add code to an existing function where it was already included in the "Post Form - New Job Ad".

I assumed that copying and pasting the same code to the Edit form would work. However, on further testing, with or without your code present for the placeholder text (which seems to work correctly, thank you!!)), it would appear that the limiting of the Google autocomplete is the thing not working reliably. It looks like if you edit the Job Ad and then go straight into the Address location field, then enter "Paris", that the autocomplete suggestions are not limiting to Germany as they should.

However, it I delete out "Paris" from the address location field, click somewhere else in the Edit form, and then go back into the address location field and enter "Paris", only German locations are displayed as required.

So it would appear that the address limiting isn't working reliably until the 2nd click in the address location field.

I created a video to show you what I mean.
hidden link

Kind regards
Simon

New threads created by Minesh and linked to this one are listed below:

https://toolset.com/forums/topic/split-change-placeholder-text-for-maps-fields-on-a-post-form-map-address-field-limit-to-specific-country-not-working/

[Minesh]

I will split the ticket for this new question.

We will continue with that new issue with the following ticket:
- https://toolset.com/forums/topic/split-change-placeholder-text-for-maps-fields-on-a-post-form-map-address-field-limit-to-specific-country-not-working/

you are welcome to mark resolve this original ticket for placeholder issue that is already fixed.