styled search imput with span

includes/custom-field-ajuts-filter-function-frontend.php

@@ -6,6 +6,9 @@
  * 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
  *
@@ -14,140 +17,163 @@
  * 
  * @package Oficina_de_Suport_theme
  */
-
-//function POST_look_values_to_submit() {
-//          // look checked values to send
-//          // https://stackoverflow.com/a/10808238
-//          if( isset($_POST['submit-ajut']) ){
-//             echo '<p style="color:#0b0;">$_POST[submit-ajut] set</p>';
-//            if( !empty($_POST[ $fields['name'] ]) ){
-//              echo '<p style="color:#0b0;">$_POST[$fields[name]] not empty</p>';
-//              foreach( $_POST[ $fields['name'] ] as $post_fields_name ) {
-//                $post_fields_name_value_checked[] = $post_fields_name;
-//              };
-//              $all_post_fields_name_values_selection[]  = $fields['name'] . '=' . implode(',',$post_fields_name_value_checked);
-//              unset($post_fields_name_values_checked);
-//            } else {
-//              echo '<p style="color:#b00;">$_POST[$fields[name]] empty</p>';
-//            };
-//            //end look for checked values to send
-//             echo '<p style="color:#0b0;">after $_POST:' . $url . '</p>';
-//          };
-//          // end look checked values to send
-//}
-
-if( ! function_exists( 'ofisuport_ajuts_filters_form' ) ):
+?>
+<?php
+if( ! function_exists( 'ofisuport_ajuts_filters_form') ) {
   function ofisuport_ajuts_filters_form() {
-
-    echo  '<div id="archive-filters" class="ofisuport-filters">';
+?>
+    <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 ) {
-		
-      // start the form 
-      echo '<form name="search-ajuts" method="post" action="' . $url . '">';
-
+    ?>
+      <?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' ){
-
-          //echo '<span style="color: #00b">' . ($field_key['key']) . '</span><br/>' . '<span style="color: #00b">' . ($field_key['label']) . '</span><br/>' .  '<span style="color: #00b">' . ($field_key['name']) . '</span><br/>';
-
+        
           // https://wordpress.stackexchange.com/a/102915
           $fields = get_field_object($field_key['key']);
           if( $fields ) {
-
-          // look checked values to send
-          //POST_look_values_to_submit();
-          // look checked values to send
-          // https://stackoverflow.com/a/10808238
-          if( isset($_POST['submit-ajut']) ){
-             echo '<p style="color:#0b0;">$_POST[submit-ajut] set</p>';
-            if( !empty($_POST[ $fields['name'] ]) ){
-              echo '<p style="color:#0b0;">$_POST[$fields[name]] ' . $fields['name'] .  ' not empty</p>';
-              foreach( $_POST[ $fields['name'] ] as $post_fields_name ) {
-                $post_fields_name_value_checked[] = $post_fields_name;
-              };
-              $all_post_fields_name_values_selection[]  = $fields['name'] . '=' . implode(',',$post_fields_name_value_checked);
-              unset($post_fields_name_values_checked);
-            } else {
-              echo '<p style="color:#b00;">$_POST[$fields[name]] ' . $fields['name'] .  ' empty</p>';
-            };
-            //end look for checked values to send
-             echo '<p style="color:#0b0;">after $_POST:' . implode('?',$all_post_fields_name_values_selection) . '</p>';
-          };
-          // end look checked values to send
-
+        
             // check for values from meta fields db in url
             foreach( $GLOBALS['my_query_filters'] as $key => $fieldname ) {
-
-              // check for values in url
-              // get value if available
+        
+              // check for values in url and  get value if available
               if( isset($_GET[ $fieldname ]) ) {
-
                 $filteredvalues['value'] = explode(',', $_GET[ $fieldname ]);
-		          };
-		          //end check for values in url
-  
-
-                // construct the checkboxes
-                if( $fieldname == $fields['name']) {
-  
-                  echo '<nav id="fund-filter" class="' . $fields['name'] .  '">' ;
-                  echo '<h5>' . $fields['label'] . '</h5>';
-                  echo '<ul>';
-                  foreach( $fields['choices'] as $choicevalue => $choicelabel ) {
-  
-                    echo '<li>';
-                    echo '<label for="' . $choicevalue  . '">';
-                    echo '<input class="ofisuport-filter filter" type="checkbox" ';
-                    echo ' value="' .  $choicevalue . '" ';
-                   echo ' name="' .  $fields['name'] . '[]" ';
-                    if( in_array($choicevalue,$filteredvalues['value']) ) {
-  
-                      echo ' checked="checked" ';
-  
-                    };
-                    echo ' />';
-                    echo $choicelabel;
-                    echo '</label>';
-                    echo '</li>';
-  
-                  };
-                  echo '</ul>';
-                  echo '</nav>';
-                };
-                // end of construct checkboxes
+              } else {
+                $filteredvalues['value'] = []; 
+              };
+              //end check for values in url
+        
+              // construct the checkboxes
+              if( $fieldname == $fields['name']) {
+?>      
+ 
+        <section id="fund-filter fund-filter-<?php echo $fields['name']; ?>" class="<?php echo $fields['name']; ?>"> 
+          <h5 class="oficinasuport-titol-opcions"><?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" name="<?php echo $fields['name'];?>" <?php if( in_array( $choicevalue, $filteredvalues['value']) ) { echo 'checked'; } ?> value="<?php echo $choicevalue; ?>" />
+              <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 ?>
                 
-            };
-            // end check for values from meta fields db in url
-
-
-          };
-          //end if field_key['key'] 
+           <?php }; // end check for values from meta fields db in url ?>
+ 
+         <?php }; //end if field_key['key'] ?>
        
-        };
-        //end if type checkbox
+        <?php }; //end if type checkbox ?>
+ 
+      <?php }; //end foreach groupkey field ?>
+      <?php //echo '<p><span id="filterlink"></span></p>';?>
+      <p><a id="submitfilteredlink" name="submit-ajut" class="button button-more" href="">enviar</a> </p>
+      </form>
+      <?php //close the form and subit ?>
+ 
+      <?php }; //end if groupkey ?>
+      <aside id="search-form-ajuts" class="ofisuport-search-ajuts">
+        <?php
+         // search form for custom post type 'oficinasuport-ajut'
+         // <input type="hidden" value="ofisuport-ajut" name="post_type" id="post_type" />
+         // https://developer.wordpress.org/reference/functions/get_search_form/#comment-369
+         // https://wordpress.stackexchange.com/questions/313037/restrict-a-sear  ch-to-a-custom-post-type
+        ?>
+        <form class="ofisuport-search-form" role="search" method="get" action="/">
+        	<label class="screen-reader-text" for="search">Search in ajuts</label>
+          <input type="search" id="search" class="search-field" placeholder="cerca amb paraula clau..." value="<?php the_search_query(); ?>" name="s" />
+          <input type="submit" id="searchsubmit" class="search-submit" value="cerca">
+          <span class="ofisuport-search-submit ofisuport-icon-search"></span>
+          <input type="hidden" value="ofisuport-ajut" name="post_type" id="post_type" />
+        </form>   
+      </aside>
+</div>
+ 
+<script type="text/javascript">
+ 
+(function($) {
+    // change
+    $('#archive-filters').on('click', 'input', function(){
+        
+        // vars 
+        var url = '<?php echo home_url('ajuts/'); ?>';
+            args = {};
+        var appendtoURL = '';
+        var eachfiltered = '';
+        var valueschecked = '';
+        
+        // loop over filters
+        $('#archive-filters .filter').each(function(){
+           // check if is first appearance of each
+           if( eachfiltered != $(this).data('filter') ){
+             // save already calculated field=val01,val02,val03
+             if( eachfiltered != '' && valueschecked != '' ){
+               // remove last ','
+               valueschecked = valueschecked.slice(0, -1);
+               appendtoURL += eachfiltered +'=' +valueschecked +'&';
+             };
+             // start new fieldname filtered
+             eachfiltered = $(this).data('filter');
+             // reset values 
+             valueschecked = '';
+             // find checked inputs 
+             $(this).find('input:checked').each(function(){
+               // if not empty save value and ,
+               if( $(this).val() != '' ){
+                valueschecked += $(this).val() + ',';
+               };
+             });
+             //alert( appendtoURL +":" +eachfiltered +"=" +valuescheked);
+           } else {
+             // we have previous values checked
+             // find checked inputs
+             //if( $(this).val() != '' ){
+               // if not empty append value and ,
+               $(this).find('input:checked').each(function(){
+                 valueschecked += $(this).val() + ',';
+               });
+             //alert( appendtoURL +":not:" +eachfiltered +"=" +valuescheked);
+             //};
+           };
+        });
+        
+        // remove last ','
+        valueschecked = valueschecked.slice(0, -1);
+        // save last cycled filtered value already calculated field=val01,val02,val03
+        appendtoURL += eachfiltered +'=' +valueschecked +'&';
+ 
+        // remove last &
+        appendtoURL = appendtoURL.slice(0, -1);
+        
+        // update url
+        url += '?' +appendtoURL;
+ 
+        // show or modify the url
+        //alert( url );
+        //$('#filterlink').text(url);
+        
+        // convert a href url to new value
+        $('#submitfilteredlink').attr('href',url);
+ 
+    });
+ 
+})(jQuery);
+</script>
 
-      };
-      //end foreach groupkey field
-
-      $url = home_url('ajuts/?') . implode('&',$all_post_fields_name_values_selection);
-      echo '<p>' . $url . '</p>';
-      //header('Location:'. $url);
-      echo '<button type="submit" name="submit-ajut" class="button-more">enviar</button>';
-      echo '</form>'; 
-      //close the form and subit
-      //POST_look_values_to_submit();
-
-    };
-    //end if groupkey
-
-    echo '</div>';
-  };
-  //end ofisuport_display_filters()
-endif;
+<?php
+  }; //end ofisuport_ajuts_filters_form
+}; // end if ! functions_exists
 ?>