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