Tammu
asked on
Based on Select box selected text get a custom post custom fields in Wordpress using jQuery
I have a select box called mfr colors which has manufacturer colors. Here is my select box with a couple of options but in general there a lot more options.
Now each mfr color has 4 thread colors namely primary, secondary, third and fourth. I have a custom post type called manu-color and each manu color has all the four thread colors. What I am trying to do is display the four colors based on the mfr color selected above from the select box.
here is my code for the custom post type
and the custom field for each manu color
How can display the four colors based on the select box selected text
Thanks and appreciate it
<select id="tmcp_select_1" class="tmcp-field tm-epo-field tmcp-select tm-valid" name="tmcp_select_0" data-price="" data-rules="" tabindex="1" aria-required="true" aria-invalid="false">
<option value="Custom_0" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Custom</option>
<option value="Black Roof Orange Body_1" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Black Roof Orange Body</option>
<option value="Red Body White Roof_2" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Red Body White Roof</option>
</select>
Now each mfr color has 4 thread colors namely primary, secondary, third and fourth. I have a custom post type called manu-color and each manu color has all the four thread colors. What I am trying to do is display the four colors based on the mfr color selected above from the select box.
here is my code for the custom post type
function pcfa_create_post_type() {
// set up labels for Colors
$labels = array(
'name' => 'Manufacturer Colors',
'singular_name' => 'Manufacturer Color',
'add_new' => 'Add New Manufacturer Color',
'add_new_item' => 'Add New Manufacturer Color',
'edit_item' => 'Edit Manufacturer Color',
'new_item' => 'New Manufacturer Color',
'all_items' => 'All Manufacturer Colors',
'view_item' => 'View Manufacturer Color',
'search_items' => 'Search Manufacturer Color',
'not_found' => 'No Manufacturer Color Found',
'not_found_in_trash' => 'No Manufacturer Color found in Trash',
'featured_image' => 'Manufacturer Color Featured Image',
'set_featured_image' => 'Set Manufacturer Color featured image',
'remove_featured_image' => 'Remove Manufacturer Color featured image',
'use_featured_image' => 'Use Manufacturer Color as featured image',
'parent_item_colon' => '',
'menu_name' => 'Manufacturer Colors',
);
//register feature apparel item post type
register_post_type( 'manu-color', array(
'labels' => $labels,
'has_archive' => true,
'public' => true,
'publicly_queryable' => true,
'supports' => array( 'title','page-attributes' ),
'exclude_from_search' => false,
'capability_type' => 'post',
'rewrite' => array( 'slug' => 'manu-color' ),
'menu_icon' => 'dashicons-products',
'query_var' => true,
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'show_ui' => true,
'show_in_menu' => true,
)
);
}
add_action( 'init', 'pcfa_create_post_type' );
and the custom field for each manu color
add_action( 'cmb2_init', 'pc_manu_color_metabox' );
function pc_manu_color_metabox() {
// Start with an underscore to hide fields from custom fields list
$prefix = '_pc_mfrcolor_';
$cmb_ccontent = new_cmb2_box( array(
'id' => $prefix . 'color_metabox',
'title' => __( '<strong style="font-size:20px;text-transform:uppercase;">Color Details Section</strong>', 'cmb2' ),
'object_types' => array( 'manu-color' ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
// 'cmb_styles' => false, // false to disable the CMB stylesheet
// 'closed' => true, // true to keep the metabox closed by default
) );
$cmb_ccontent->add_field( array(
'name' => __( 'Primary Color Name', 'cmb2' ),
'desc' => __( 'enter name for the color example white', 'cmb2' ),
'id' => $prefix . 'primary_color_name',
'type' => 'text',
'before_row' => '<div style="margin:20px;padding:5px 20px;border:2px solid #993333"><h4 style="background:#000;color:#fff;padding:10px;font-size:20px;font-weight:600;">Colors Section</h4><table style="width:100%"><tr><td style="width:100%">',
'after_row' =>'</td></tr>',
) );
$cmb_ccontent->add_field( array(
'name' => __( 'Secondary Color Name', 'cmb2' ),
'desc' => __( 'enter name for the color example white', 'cmb2' ),
'id' => $prefix . 'secondary_color_name',
'type' => 'text',
'before_row' => '<tr><td style="width:100%">',
'after_row' =>'</td></tr>',
) );
$cmb_ccontent->add_field( array(
'name' => __( 'Third Color Name', 'cmb2' ),
'desc' => __( 'enter name for the color example white', 'cmb2' ),
'id' => $prefix . 'third_color_name',
'type' => 'text',
'before_row' => '<tr><td style="width:100%">',
'after_row' =>'</td></tr>',
) );
$cmb_ccontent->add_field( array(
'name' => __( 'Fourth Color Name', 'cmb2' ),
'desc' => __( 'enter name for the color example white', 'cmb2' ),
'id' => $prefix . 'fourth_color_name',
'type' => 'text',
'before_row' => '<tr><td style="width:100%">',
'after_row' =>'</td></tr></table></div>',
) );
}
How can display the four colors based on the select box selected text
Thanks and appreciate it
ASKER
Sorry I am not following. How can I create a demo when its a PHP code in WordPress. Basically each manu-color has 4 thread colors so for example if the manu-color post is Black Roof Orange Body, its four custom fields values are as follow
Primary Color: Black
Secondary Color: White
Third Color: Orange
Fourth Color: Black
I am planning on accessing them using wp_query array , I just need to know how to get just the post of the selected mfr color from the select box, then I can display the four thread colors of that manu color.
Primary Color: Black
Secondary Color: White
Third Color: Orange
Fourth Color: Black
I am planning on accessing them using wp_query array , I just need to know how to get just the post of the selected mfr color from the select box, then I can display the four thread colors of that manu color.
$mcquery = new WP_Query( array( 'post_type' => 'manu-color' ) );
you can create demo using jsfiddle using html rendered, css and javascrpts library + custom js
I am not sure what the output of all those columns, what is wrong here, and what are you trying to achieve :)
do you have any demo site or link to actual site to see whats going on?
I am not sure what the output of all those columns, what is wrong here, and what are you trying to achieve :)
do you have any demo site or link to actual site to see whats going on?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I tried, but giving errors
https://jsfiddle.net/5jt00xg0/