styled search imput with span

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

@@ -18,9 +18,8 @@
  * @package Oficina_de_Suport_theme
  */
 ?>
-
-<?php 
-if( ! function_exists( 'ofisuport_ajuts_filters_form' ) ):
+<?php
+if( ! function_exists( 'ofisuport_ajuts_filters_form') ) {
   function ofisuport_ajuts_filters_form() {
 ?>
     <div id="archive-filters" class="ofisuport-filters">
@@ -31,126 +30,150 @@ if( ! function_exists( 'ofisuport_ajuts_filters_form' ) ):
     ?>
       <?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 ]);
-		          };
-		          //end check for values in url
-
+              } else {
+                $filteredvalues['value'] = []; 
+              };
+              //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>
+?>      
+ 
+        <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"
- <?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>
-
+ 
+            <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 ?>
                 
            <?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="button" name="submit-ajut" class="button-more">enviar</button> 
+      <?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 ?>
-
+      <?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('change', 'input[type="checkbox"]', function(){
-    $('#archive-filters').on('click', 'button', function(){
-
-        // vars
+    $('#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(){
-            urldos = url;     
-            // vars
-            var filteredajuts = $(this).data('filter'),
-                vals = [],
-                allvalueschecked = [];
-              // find checked inputs
-              $(this).find('input:checked').each(function(){
-                vals.push( $(this).val() );
-                var thisvaluechecked =  $(this).val();
-                urldos += filteredajuts;
-              });
-            
-            // append to args
-            args[ filteredajuts ] = vals.join(',');
-            alert( filteredajuts +'=' +args[ filteredajuts ]);
+           // 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 += '?';
+        url += '?' +appendtoURL;
+ 
+        // show or modify the url
+        //alert( url );
+        //$('#filterlink').text(url);
         
-        // loop over args
-        $.each(args, function( name, value ){
-            url += name + '=' + value + '&';
-        });
-        
-
-
-        // remove last &
-        url = url.slice(0, -1);
-        
-        // reload page
-        //$('#archive-filters button').on('click', function () {
-          alert( "estoy en: " +url );
-          //window.location.replace( url );
-        //});
-
+        // convert a href url to new value
+        $('#submitfilteredlink').attr('href',url);
+ 
     });
-
+ 
 })(jQuery);
 </script>
 
-<?php 
-  }; //end ofisuport_display_filters()
-  endif; // end if ! functionexists
+<?php
+  }; //end ofisuport_ajuts_filters_form
+}; // end if ! functions_exists
 ?>