I am using ajax to filter a profession in a professional listing. But it asks me this error: Can not set property 'innerHTML' of null. The ajax code is:
<script type="text/javascript">
var req;
function filtro_pesquisa(valor) {
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "pesquisa.php?valor="+valor;
req.open("Get", url, true);
req.onreadystatechange = function() {
if(req.readyState == 1)
{ document.getElementById('col-md-4').innerHTML = 'A procurar...';
}
if(req.readyState == 4 && req.status == 200)
{
document.getElementById('col-md-4').innerHTML = '';
var resposta = req.responseText;
document.getElementById('col-md-4').innerHTML = resposta;
}
}
req.send(null);
}
</script>
the form of research is:
<form class="navbar-form" role="search">
<div class="input-group" style="margin-bottom: 10px;">
<h5 style="color:black;"> Encontre um profissional</h5>
<div class="input-group">
<input type="text" class="form-control" placeholder="Profissão" name="profissao" id="profissao" oninput="filtro_pesquisa(this.value);" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Pesquisar</button>
</span>
</div>
</form>
I still have the pesquisa.php file and the listing code that is in "col-md-4" div class. When I try to do a search is one mistake that me appears. Thanks for the help.