Construct a search string from three select elements?

1 Views

I’m trying to construct a search form and make a search on wordpress getting the values from two select elements from within the form. Anyone know how? Do I have to use JS, AJAX or both? Any help would be appreciated. 

function categories_header_form()
{
?>
  <div id="header-form">
    <h3 class="form-title">
        <?php echo 'Αναζήτηση προϊόντων ανά περιοχή' ?>
    </h3>
    <form id="search-form" action="<?php bloginfo('url'); ?>" method="get" >
      <div class="form-container">

        <?php nomoi(); ?>

        <?php products_selection(); ?>

        <button type="submit" class="button" id="search-form-button">Εύρεση</button>
      </div>
    </form>
  </div>
<?php
}

function products_selection()
{
    $args = array(
      'post_type'   => 'seller',
      'taxonomy'    => 'category',
      'hide_empty'  => 0,
      'exclude'     => 1,1078,1079
    );
    $products = get_categories( $args );

    if ( $products ) {
    echo '<select id="products-select">';
      echo '<option selected="" disabled="" value="0"><span>Προϊόντα</span></option>';

      foreach ($products as $product) {
        echo '<option class="product-name" id="'. $product->term_id .'">'. $product->name .'</option>';
      }
    echo '</select>';
  }
}

function nomoi()
{
  $args = array(
    'post_type' => 'seller',
    'taxonomy'  => 'nomos',
    'hide_empty'=> 0,
    'parent'    => 0
  );

  $categories = get_categories( $args );

  if ( $categories ) {
    echo '<select id="nomoi-select" name="nomoi">';
      echo '<option selected="selected" disabled="disabled"><span>Νομοί</span></option>';

      foreach ( $categories as $category ) {
        $id = $category->term_id;
        $name = $category->name;
        echo '<option class="nomos" id="'. $id .'">'. $name .'</option>';
      }
    echo '</select>';
    echo '<select id="town-select" name="towns">';
      echo '<option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span></option>';
    echo '</select>';
  }
}

This is my search form along with the select tags. I’m a starter in JS and AJAX and don’t know how to perform the query correctly. The second select field is populated through AJAX

Post Views: 1

Related posts

1 comment

  1. Here is one way you could do it. Listen for changes to the select elements and save the value. Then use the values in the for the search query.

    (function(doc, undefined) {

  /** these 2 var must be available to the whole function */
  var el1, el2;

  var getSelectedValue = function(el) {
    /**
     * @params {object} el - HTML Element
     * @returns {string}
     */
    return el.selectedOptions[0].value;
  };

  var getSearchString = function(select1, select2) {
    /**
     * @params {object} el1 - HTML Element
     * @params {object} el2 - HTML Element
     * @returns {string}
     */
    return [getSelectedValue(select1), getSelectedValue(select2)].join(' ');
  };

  function delegator(event) {
    /**
     * @params {object} - Event Object
     * When change event occurs, evaluate the definition of el1 and el2.
     * Assign value to el1 if assigned already.
     * If el1 is assigned, check value of el2 and assign.
     * If both have valid assignments to the objects we need, then we can get the search string.
     */
    switch (event.type) {
      case 'change':
        if (el1 === undefined && el2 === undefined) {
          el1 = event.target;
        } else if (el1 instanceof HTMLSelectElement && el2 === undefined) {
          el2 = event.target;
        }
        if (el1 instanceof HTMLSelectElement && el2 instanceof HTMLSelectElement) {
          doc.getElementById('search').setAttribute('value', getSearchString(el1, el2));
        }
        break;
    }

  }
  doc.addEventListener('change', delegator, false);
}(document, undefined));
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Get Search String</title>
</head>

<body>


  <form id="my-select-form" name="my-select-form">
    <select id="products-select">
      <option selected="" disabled="" value="0"><span>Προϊόντα</span>
      </option>
      <option class="product-name" id="product_term_id">product_name</option>
    </select>

    <select id="nomoi-select" name="nomoi">
      <option selected="selected" disabled="disabled"><span>Νομοί</span>
      </option>
      <option class="nomos" id="id">name</option>
    </select>

    <select id="town-select" name="towns">
      <option class="town-disabled" selected="selected" disabled="disabled"><span>Πόλεις</span>
      </option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </form>

  <form id="my-search-form">
    <input id="search" type="search" />
  </form>

</body>

</html>

Comments are closed.