0

I have 3 custom fields: Gender, Partner name, and Partner last name.

I need a js or CSS function. If I select "Female" from ecpt_gender select box, 2 custom fields appear by CSS changing the display property from display:none to display:block.

1
  • Do you want to make this happen on backend? If so how have you achieved dropdown for Gender under custom fields? Please provide more details so that I may assist. Jul 11, 2015 at 16:46

1 Answer 1

1

Actually your question is off-topic here, because it's javascripts specific and not specific to WordPress. But I'm answering it and making it more WordPress-centric so that others get help too.

The following function will enqueue a custom.js file from your theme folder's /js subfolder to only admin panel (put it in functions.php of your theme):

function my_admin_scripts() {
    wp_enqueue_script( 'custom-js', get_template_directory_uri() .'/js/custom.js', array('jquery'), '', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Now in the custom.js file write down the following code:

jQuery(document).ready(function($) {

    var field_one = $('#field_one');
    var field_two = $('#field_two');

    //hiding the field first
    field_one.hide();
    field_two.hide();

    //on value change
    $('[name="ecpt_gender"]').on('change', function(){
       //we're checking what the value we've got
       if( $(this).val() === 'Female' ) {
          field_one.show(); //you can use slideDown() instead of show() for some animation
          field_two.show();
       } else {
          field_one.hide();
          field_two.hide();
       }
    });
});

If you want to load the scripts only to a certain page, use $current_screen Global inside the function:

function my_admin_scripts() {
    global $current_screen;
    //var_dump( $current_screen ); //check what you've got using this variable
    if( 'post.php' === $current_screen || 'post-new.php' === $current_screen )
         wp_enqueue_script( 'custom-js', get_template_directory_uri() .'/js/custom.js', array('jquery'), '', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Always take precaution about JS-based show/hide fields, because they are good when inserting data, but they may not functional when updating/editing data. So take precaution there like the following:

Inside your metabox fields use get_post_meta() and show the fields accordingly:

$ecpt_gender_db_val = get_post_meta( $post_id, 'field_name', true ); //fetching single value

if( $ecpt_gender_db_val && $ecpt_gender_db_val === 'Female' ) {
    //show the fields associated with 'Female' value
}

But in my opinion it's safer doing JS more specific, if that's specific only to the New Post page:

var field_one = $('body.post-new-php #field_one');

Doing so will make the item selection more specific to only the add new page, and it won't be applicable to the edit page. I'm using the dynamic <body> class to target page-specific items.

2
  • Thank you, how can i add On page load, if ecpt_gender is Female, field_one.show(); field_two.show();
    – Tayssir Ch
    Jul 12, 2015 at 11:14
  • It's the document.ready() function we've shown here. Jul 12, 2015 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.