Link to home
Start Free TrialLog in
Avatar of Tammu
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.

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

Open in new window


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

Open in new window


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>',
	) );
	
}

Open in new window


How can display the four colors based on the select box selected text

Thanks and appreciate it
Avatar of HainKurt
HainKurt
Flag of Canada image

can you please create a jsfiddle.net demo...

I tried, but giving errors

https://jsfiddle.net/5jt00xg0/
Avatar of Tammu
Tammu

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.

$mcquery = new WP_Query( array( 'post_type' => 'manu-color' ) );

Open in new window

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?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial