Search for all or just one form field

Asked

Viewed 32 times

0

I’m having problems with a form on my Wordpress blog, I have the following form that is on file functions.php.

function terapeuta_search_scripts(){
wp_enqueue_script('terapeutas', get_stylesheet_directory_uri() . '/js/terapeutas.js', array(), '1.0.0', true);
wp_localize_script('terapeutas', 'ajax_url', admin_url('admin-ajax.php'));
}

function terapeuta_search(){
terapeuta_search_scripts();

ob_start();
?>
<div id="bed-search">
    <form action="" method="get">
        <input placeholder="Pesquise um nome..." id="terapeuta-nome" type="text" name="terapeuta-nome" />
        <select id="terapeuta-estado" name="terapeuta-estado">
            <option value="" selected="selected">Estados</option>
            <option value="AL">AL</option>
            <option value="BA">BA</option>
            <option value="CE">CE</option>
            <option value="DF">DF</option>
            <option value="GO">GO</option>
            <option value="MG">MG</option>
            <option value="MS">MS</option>
            <option value="MT">MT</option>
            <option value="RJ">RJ</option>
            <option value="RN">RN</option>
            <option value="RS">RS</option>
            <option value="SP">SP</option>
            <option value="SC">SC</option>
            <option value="PR">PR</option>
        </select>
        <select id="terapeuta-cidade" name="terapeuta-cidade">
            <option value="" selected="selected">Cidades</option>
            <option value="Armação dos Búzios">Armação dos Búzios</option>
            <option value="Atibaia">Atibaia</option>
            <option value="Belo Horizonte">Belo Horizonte</option>
            <option value="Brasília">Brasília</option>
            <option value="Bueno Brandão">Bueno Brandão</option>
            <option value="Campinas">Campinas</option>
            <option value="Campos do Jordão">Campos do Jordão</option>
            <option value="Cianorte">Cianorte</option>
            <option value="Curitiba">Curitiba</option>
            <option value="Chapecó">Chapecó</option>
            <option value="Delfim Moreira">Delfim Moreira</option>
            <option value="Florianópolis">Florianópolis</option>
            <option value="Foz do Iguaçu">Foz do Iguaçu</option>
            <option value="Garça">Garça</option>
            <option value="Guarantã do Norte">Guarantã do Norte</option>
            <option value="Ilhabela">Ilhabela</option>
            <option value="Maceió">Maceió</option>
            <option value="Maracaju">Maracaju</option>
            <option value="Miguel Pereira">Miguel Pereira</option>
            <option value="Morungaba">Morungaba</option>
            <option value="Natal">Natal</option>
            <option value="Piratininga">Piratininga</option>
            <option value="Porto Alegre">Porto Alegre</option>
            <option value="Rio de Janeiro">Rio de Janeiro</option>
            <option value="Santana de Parnaíba">Santana de Parnaíba</option>
            <option value="São Paulo">São Paulo</option>
            <option value="Santo André">Santo André</option>
            <option value="Sinop">Sinop</option>
            <option value="Sorocaba">Sorocaba</option>
            <option value="Ubatuba">Ubatuba</option>
            <option value="Uruçuca">Uruçuca</option>
            <option value="Uberlândia">Uberlândia</option>
            <option value="Volta Redonda">Volta Redonda</option>
        </select>
        <button type="submit">Buscar Terapeuta</button>
    </form>

    <ul style="list-style-type:none;"></ul>

</div>
<?php
return ob_get_clean();
}

And in my Javascript file is the following code...

$ = jQuery;

var bedSearch = $("#bed-search");
var searchForm = bedSearch.find("form");

searchForm.submit(function(e){
e.preventDefault();

    var data = {
        action : "terapeuta_search",
        nome : bedSearch.find("#terapeuta-nome").val(),
        estado : bedSearch.find("#terapeuta-estado").val(),
        cidade : bedSearch.find("#terapeuta-cidade").val()
    };
    $.ajax({
        url : ajax_url,
        data : data,
        success : function(response){
            bedSearch.find("ul").empty();
            for(var i = 0; i < response.length; i++){
                console.log(response[i]);
                var html = "<li id='terapeuta-" + response[i].id + "'><a style='color:orange;' href='" + response[i].permalink + "'>" + response[i].nome + "</a></li>";
                bedSearch.find("ul").append(html);
            }
        }
    });
});

At the moment the search works if I fill in [name + state + city] or [state + city], but I’m lost on how to do it so it can be possible to search only for one of the fields being filled in.

  • If possible post the code of your action terapeuta_search

  • The problem is not in Javascript, it is in the query to the database that must require the data to return some value. We would have to see how this consultation is being done to suggest an amendment.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.