Load respective custom field as input field when the select option is changed

I have 2 custom Posts Type

Subject Clusters ( is a group of subjects)

So when a new cluster is saved, it saves a group of subjects.

Subjects (2nd custom post type) can be added via a multi-select custom field (ACF Post object) on cluster Post type edit screen. Here is the link to an image portraying it.


Now in the frontend, I have created a select option for each cluster. Below that there will be a couple of subject Grade input field according to the cluster object selected.

For example, Math related cluster should populate a 4 subject input fields like the image below.


Once the cluster option changes it would change fields accordingly.

Here is my code to get cluster as an option.

global $post;
$args = array(
‘numberposts’ => -1,
‘post_type’ => ‘cluster’

$clusterlist = get_posts( $args ); ?>

<select class=”custom-select” id=”inputGroupSelect01″>
<option selected>Select Clusters …</option>
<?php foreach($clusterlist as $post) : setup_postdata($post);?>
<option value=”<?php echo $post->post_name; ?>”><?php the_title(); ?>
<?php endforeach; ?>

Now how would I get the multiple subjects selected on the cluster post type edit screen as an input field on the homepage?? field name = “subjects”

Html for input field of Math related Cluster

<div class=”form-row pb-5″ id=”math-related””>
<div class=”form-group col-md-3″>
<input type=”number” class=”form-control” id=”num1″ placeholder=”Math”>
<div class=”form-group col-md-3″>
<input type=”number” class=”form-control” id=”num2″ placeholder=”Science”>
<div class=”form-group col-md-3″>
<input type=”number” class=”form-control” id=”num3″ placeholder=”Computer”>
<div class=”form-group col-md-3″>
<input type=”number” class=”form-control” id=”num4″ placeholder=”Physics”>

After that how to change the input fields once the option is changed?

Read more here:: Load respective custom field as input field when the select option is changed

Leave a Reply

Your email address will not be published. Required fields are marked *