adding search functions to the search forms
authorAnthony Talarico <talarico@gaslightmedia.com>
Thu, 30 Mar 2017 20:43:59 +0000 (16:43 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Thu, 30 Mar 2017 20:43:59 +0000 (16:43 -0400)
index.php
js/search.js [new file with mode: 0644]
parts/search-form.php
sections/front-page.php
sections/header.php

index 3f0fbc4..747bbd3 100644 (file)
--- a/index.php
+++ b/index.php
         <script charset="utf-8" type="text/javascript">var switchTo5x=true;</script>
         <script charset="utf-8" type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
         <script charset="utf-8" type="text/javascript">stLight.options({"publisher":"wp.c3d3647e-de70-4780-b71d-6b739fad685a"});var st_type="wordpress4.3.1";</script>
+        <script>
+            jQuery(function(){
+                // 'Global' Namespace
+                var page = $('body');
+                
+                // Search Namespace / Module
+                var search = ( function(){
+                    
+                    // Private members
+                    var baseUrl     = '<?php echo home_url('/') ?>';
+                    var eventsPage  = '<?php echo get_permalink(131) ?>';
+                    var url,queryType;
+                    
+                    // Public members
+                    return {
+                        getCatalogSearch: function(){
+                            var catalog = page.find('.catalog-search');
+                            return catalog;
+                        },
+                        getMainSearch: function(){
+                            var mainSearch = page.find('.main-search');
+                            return mainSearch;
+                        },
+                        getEventSearch: function(){
+                            var eventSearch = page.find(".event-search");
+                            return eventSearch;
+                        },
+                        getSearchForm: function(){
+                            var searchForm = page.find('.searchform');
+                            return searchForm;
+                        },
+                        getSearchQuery: function(){
+                           var query = page.find(".search-input").val();
+                            return query;
+                        },
+                        submitQuery: function(){
+                            var searchForm = this.getSearchForm();
+                        },
+                        changeAction: function(catalog,main,events,form){ 
+                            
+                            $([catalog,main,events]).each(function(){
+                                $(this).on("change", function(){
+                                   this.queryType = $(this).val();
+                        
+                                    switch(this.queryType){
+                                        case 'catalog':
+                                            this.url = 'https://charlevoix.bibliocommons.com/search?custom_query=';
+                                            form.attr("method", "GET");
+                                            form.children('.search-input').attr('name','query');
+                                            break;
+                                        case 'site':
+                                            this.url = baseUrl + 'site-search';
+                                            form.attr("method", "GET");
+                                            form.children('.search-input').attr('name','query');
+                                            break;
+                                        case 'events':
+                                            form.attr("method", "POST");
+                                            this.url = eventsPage;
+                                            form.children('.search-input').attr('name','event_name');
+                                            break;
+                                        default:
+                                            break;
+                                    }
+                                    form.attr('action', this.url);
+                                    
+                                });
+                                query = this.queryType;
+                                
+                            });
+                        }, 
+                        queryType: this.queryType
+                        
+                    }
+                })();
+                search.changeAction(search.getCatalogSearch(),search.getMainSearch(),search.getEventSearch(),search.getSearchForm());
+                $('.searchform').on('submit', function(){
+                    var search_val = $(this).children('.search-input');
+                    if( search.queryType === 'catalog'){
+                        $(this).attr('action', this.url + search_val);
+                    } else {
+                        console.log(search.query);
+                        return false;
+                    }
+                    
+                });
+                console.log(search);
+            });
+        </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/js/search.js b/js/search.js
new file mode 100644 (file)
index 0000000..dc00cc9
--- /dev/null
@@ -0,0 +1,2 @@
+
+   
\ No newline at end of file
index 0130f8c..68210b6 100644 (file)
@@ -2,8 +2,8 @@
     <input class="search-input" type="text" placeholder="Books, Movies, Music & More" value="" name="query">
     <input class="search-button button" type="submit" value="Search" name="submit">
     <div class="radio-area">
-        <input type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
-        <input type="radio" name="chooseone" value="site"> <label for="site">Site</label>
-        <input type="radio" name="chooseone" value="events"> <label for="events">Events</label>
+        <input class="catalog-search" type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
+        <input class="main-search" type="radio" name="chooseone" value="site"> <label for="site">Site</label>
+        <input class="event-search" type="radio" name="chooseone" value="events"> <label for="events">Events</label>
     </div>
 </form>
\ No newline at end of file
index 0aee7cd..adac252 100644 (file)
@@ -4,9 +4,9 @@
                                 <input class="search-input" type="text" placeholder="Search  for Books, Movies, Music, and More" value="" name="query">
                                 <input class="search-button" type="image" value="Search" name="submit" src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-icon.png">
                                 <div class="radio-area">
-                                    <input type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
-                                    <input type="radio" name="chooseone" value="site"> <label for="site">Site</label>
-                                    <input type="radio" name="chooseone" value="events"> <label for="events">Events</label>
+                                    <input class="catalog-search" type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
+                                    <input class="main-search" type="radio" name="chooseone" value="site"> <label for="site">Site</label>
+                                    <input class="event-search" type="radio" name="chooseone" value="events"> <label for="events">Events</label>
                                 </div>
                             </form>
                         </div>
index 16da916..516b5f1 100644 (file)
@@ -14,9 +14,9 @@
                     <input class="search-input" type="text" placeholder="Search  for Books, Movies, Music, and More" value="" name="query">
                     <input class="search-button" alt="search-button" type="image" value="Search" name="submit" src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-icon.png">
                     <div class="radio-area">
-                        <input type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
-                        <input type="radio" name="chooseone" value="site"> <label for="site">Site</label>
-                        <input type="radio" name="chooseone" value="events"> <label for="events">Events</label>
+                        <input class="catalog-search" type="radio" name="chooseone" value="catalog"> <label for="catalog">Catalog</label>
+                        <input class="main-search" type="radio" name="chooseone" value="site"> <label for="site">Site</label>
+                        <input class="event-search" type="radio" name="chooseone" value="events"> <label for="events">Events</label>
                     </div>
                 </form>
             <?php } ?>