ajax search function using POST method without jquery - php

Question

I have some html pages about movies, all containing the same search form. When the user types something in the form, I want the site to jump to movies-overview page. I already made a search function without ajax, but with a simple post request that searches the database en echos a movielist. But now I want the same to happen everytime a user presses a key.
this is the search form:
<form action='films.php' method='post'>
<input id="ZoekBalkSearch" type="search" name="zoekparameter" placeholder="Geef een zoekterm in." onkeyup="gaNaarFilm(this.value)"/>
<input id="ZoekButton" type="submit" value="Zoek"/>
</form>
and this is my ajax code:
function gaNaarFilm(str)
{
if (str.length==0)
{
document.getElementById("ZoekBalkSearch").innerHTML='';
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("ZoekBalkSearch").innerHTML=str;
}
}
xmlhttp.open("POST",'films.php',true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('zoekparameter='+str);
}
the function is called but it doesn't seem to do anything, could someone please help me? thanks in advance.

Answer 1

fist of all you pass this and not this.value
then a short function i use for ajax is this
var ajax=function(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()}
this has low support (no ie5 and ie6) but can be extended.
then as u lauche the code directly from your element you can access your value directly inside the ajax.
so:
JS
FormData() stores the whole content of your form
the ajax() function posts to film.php
in film.php u can retrieve the value with $_POST['zoekparameter']
the response executes fu()
this is done by adding a eventListener in javascript to the input field which is keyup.
var ajax=function(){
var fd=new FormData(document.querySelector('#form'));
var c=new XMLHttpRequest||new ActiveXObject("Microsoft.XMLHTTP");
c.open('POST','film.php');
c.onload=fu;
c.send(fd)
},
fu=function(){
document.getElementById("ZoekBalkSearch").innerHTML=this.response;
}
window.onload=function(){
var i=document.querySelector('#form').childNodes[0];
i.addEventListener('keyup',ajax,false)
}
as u can see no need for extra id's, lots of code or passing each input field to a variable in this case every function can access everything without passing parameters... and so it's
easier to modify the code later...
html
<form id="form"><input type="search" name="zoekparameter" placeholder="Geef een zoekterm in."></form>
if you wanna add more fields like year or whatever you just have to add a input and a name
<input type="text" name="year">
you don't need to edit the javascript as FormData does everything for you.
if you don't understand something ask ...
if wanna check compatibility
use caniuse.com
http://caniuse.com/xhr2
http://caniuse.com/queryselector
bonus
shortest way
window.onload=function(){
var s=function(){
var a=new XMLHttpRequest;
a.open('POST','film.php');
a.onload=function(){console.log(this.response)};
a.send('zoekparameter='+i.value);
},
i=document.createElement('input');
i.type='search';
i.addEventListener('keyup',s,false);
document.body.appendChild(i);
}