Support

Account

Home Forums Backend Issues (wp-admin) Change fields in WordPress profile page when selecting option

Solving

Change fields in WordPress profile page when selecting option

  • 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
    Profile

    Relevant HTML
    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!

  • 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');
    
  • 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!

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

  • Neither,

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

    []’s

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.