I'm having problems with a form in my WordPress blog, I have the following form that is in the functions.php file.
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 in how to do so it can be possible to search only one of the fields being filled in.