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

by Hunger Feel   Last Updated July 11, 2019 19:08 PM

I have 2 custom Posts Type

  1. Subject Clusters ( is a group of subjects)
  2. 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.

https://prnt.sc/odr8pj

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.

https://prnt.sc/odrdpu

Once the cluster option changes it would change fields accordingly.

Here is my code to get cluster as an option.

<?php 
    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(); ?> 
      </option>
     <?php  endforeach; ?>
    </select>

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>
  <div class="form-group col-md-3">
    <input type="number" class="form-control" id="num2" placeholder="Science">
  </div>
  <div class="form-group col-md-3">
    <input type="number" class="form-control" id="num3" placeholder="Computer">
  </div>
  <div class="form-group col-md-3">
    <input type="number" class="form-control" id="num4" placeholder="Physics">
  </div>
</div>

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



Related Questions


Updated November 13, 2017 08:08 AM

Updated February 16, 2018 13:08 PM

Updated July 24, 2019 12:08 PM

Updated January 03, 2018 21:08 PM