Change fields in WordPress profile page when selecting option

• phillip.nunes

• December 11, 2015 at 12:43 am

Regards,

I added some fields in WordPress profile page with plugin ACF (Advanced Custom Fields), and a select with the same plugin with 3 options:

pj : PJ – Transportadora
pf : PF – Autônomo
mei : PJ – MEI

So when the user selects one of the three options, the code will hide the unwanted and display related to selected option. The code below works if placed in a simple HTML page, but when entering the WordPress nothing happens.

It is currently as below, simplified for test purposes. But each option should hide various fields.

functions.php

function my_acf_admin_footer() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
              $("#acf-field-tipo_juridico").change(function () {
                var val = $(this).val();

                if (val === "pj") {
                        $("#acf-razao_social").closest("tr").hide();
                }
                if (val === "pf") {     
                        $("#acf-razao_social").closest("tr").hide();                        
                }
                if (val === "mei") {
                        jQuery("h3:contains('PJ - Transportadora')").next(".form-table").hide();
                }
      });
    });
    </script>
    <?php
}

add_action('acf/input/admin_head', 'my_acf_admin_footer');

My profile page

Relevant HTML

And this one is referring to the local test in simple HTML file
https://jsfiddle.net/psew8ccf/

I do not know what else to do.
What is the problem? JQuery version? Conflict with something? It’s the way I load the script in functions.php ??

I appreciate any help if they know one best way to solve the problem will be grateful too.

Thanks!

• John Huebner

• December 12, 2015 at 3:39 am

The problem is that you’re targeting the id using the field name. ACF does not actually use the field name when displaying fields. Take a look at the source of the wp admin form. Instead is uses the field keys. You’re code should look something like:

unction my_acf_admin_footer() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
              // use field key here
              $("#acf-field_566afb46d86cf").change(function () {
                var val = $(this).val();

                if (val === "pj") {
                        $("#acf-razao_social").closest("tr").hide();
                }
                if (val === "pf") {     
                        $("#acf-razao_social").closest("tr").hide();                        
                }
                if (val === "mei") {
                        jQuery("h3:contains('PJ - Transportadora')").next(".form-table").hide();
                }
      });
    });
    </script>
    <?php
}

add_action('acf/input/admin_head', 'my_acf_admin_footer');

• phillip.nunes

• December 14, 2015 at 11:23 pm

Hi,

From the option to export the plugin I get it :
‘key’ => ‘ field_5661c0962f955 ‘

So I used this field as ID , that way , but not resolved:
$("#field_5661c0962f955").change(function () {

And later this, without #
$("field_5661c0962f955").change(function () {

We need to change anything else?

Tks!

• John Huebner

• December 15, 2015 at 9:42 am

Is should be
`$(“#acf-field_5661c0962f955”).change(function () {
and
$("acf-field_5661c0962f955").change(function () {

• phillip.nunes

• December 16, 2015 at 10:25 pm

Neither,

Thank you anyway. I’ll take a break and look for other ways to solve this problem without using ACF.

[]’s