oficinasuport-wp-plugin/includes/custom-field-ajuts-filter-function-frontend.php

<?php                                                                                                    
/**
 * Function to display the front end checkboxes for the ajut filter 
 *
 * references:
 * basic start
 * https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/
 * 
 * wordpress full form example
 * https://wordpress.stackexchange.com/questions/383599/form-checkbox-value-going-to-dynamic-url
 *
 * checkbox adaptation query
 * https://wordpress.stackexchange.com/a/102915
 *
 * form GET and POST
 * https://www.formget.com/php-checkbox/
 * 
 * @package Oficina_de_Suport_theme
 */
?>

<?php 
if( ! function_exists( 'ofisuport_ajuts_filters_form' ) ):
  function ofisuport_ajuts_filters_form() {
?>
    <div id="archive-filters" class="ofisuport-filters">
    <?php
    // output all possible values of a checkbox
    $groupkey = "group_63ab636898703"; // write here the key for the group of fields from acf
    if( $groupkey ) {
    ?>
      <?php // start the form ?> 
      <form id="form-ajuts" name="search-ajuts">

      <?php
      $groupkey_fields = acf_get_fields($groupkey);
      foreach( $groupkey_fields as $field_key ) {
		  
        if( $field_key['type'] == 'checkbox' ){

          // https://wordpress.stackexchange.com/a/102915
          $fields = get_field_object($field_key['key']);
          if( $fields ) {

            // check for values from meta fields db in url
            foreach( $GLOBALS['my_query_filters'] as $key => $fieldname ) {

              // check for values in url and  get value if available
              if( isset($_GET[ $fieldname ]) ) {

                $filteredvalues['value'] = explode(',', $_GET[ $fieldname ]);
                //$filteredvalues['value'] = ($_GET[ $fieldname ]);
		          };
		          //end check for values in url

              // construct the checkboxes
              if( $fieldname == $fields['name']) {
?>

        <section id="fund-filter-<?php echo $fields['name']; ?>" class="<?php echo $fields['name']; ?>"> 
          <h5><?php echo $fields['label'];?></h5>
            <?php  foreach( $fields['choices'] as $choicevalue => $choicelabel ) { ?>

          <div class="filter" data-filter="<?php echo $fields['name'];?>">
            <input
 class="ofisuport-filter"
 type="checkbox"
 <?php if( in_array($choicevalue,$filteredvalues['value']) ) { echo 'checked';}; ?>
 value="<?php echo $choicevalue ?>"
 name="<?php echo $fields['name'];?>" />
            <label for="<?php echo $choicevalue; ?>"><?php echo $choicelabel;?></label>
          </div>

            <?php };//end foreach fields['choices'] ?>

        </section>

        <?php  }; //end if fieldname == fields['name'] ?>
        <?php  // end of construct checkboxes ?>
                
           <?php }; // end check for values from meta fields db in url ?>

         <?php }; //end if field_key['key'] ?>
       
        <?php }; //end if type checkbox ?>

      <?php }; //end foreach groupkey field ?>
      <p><b>Results:</b> <span id="results"></span></p>
      <button type="submit" class="button-more">enviar</button> 
      </form>
<?php //close the form and subit ?>

<?php }; //end if groupkey ?>

</div>

<script type="text/javascript">

//https://wordpress.stackexchange.com/questions/383599/form-checkbox-value-going-to-dynamic-url
// sample form on submiit
//
(function($){

  $('#form-ajuts').on('submit', function(e) {
  
    // prevent default
    e.preventDefault();
  
    // set empty submission object
    let submission = {};
  
    // for each of this form submit event target object entries as key/field
    for (const [key, field] of Object.entries(e.target)) {
  
      // if object entry (field) has a name attribute
      if (field.name) {
  
        // if field type is
        if (field.type === 'checkbox') {

         // set field name as array
         submission[field.name] = [];
          // if checkbox is checked
          if (field.checked) {
            
            // add name/value to submission object
            submission[field.name].push(field.value);

          }
  
        } else if (field.value) {
  
          // add name/value to submission object
          submission[field.name] = field.value;
  
        }
  
      }
  
    }
  
    // now let loop through our submission and check for arrays
    for (const [name, value] of Object.entries(submission)) {
  
      // if submission value is array
      //if (Array.isArray(value)) {
        // let convert array to string
        //submission[name] = value.join(',');
  
      //}
  
    }
    
    // convert submission object to url safe params string
    let submission_url_params = $.param(submission);
    
    // if we have submission params
    if(submission_url_params) {
    
      // success actions
    
      // create our submission action url
          let submission_url_action = this.action + (submission_url_params ? '?' + submission_url_params : '');
      
      // un-comment this to actually fire the form submission
      window.location.href = submission_url_action;
  
    // else no submission params
    } else {
    
      // no submission data actions
    
    }
  
  });

});


</script>

<?php 
  }; //end ofisuport_display_filters()
  endif; // end if ! functionexists
?>