CODEWITHSUNDEEP
phpjavascriptsqlajaxsearch
Cédric Vandelaer
Cédric Vandelaer

Reputation: 153

ajax search function using POST method without jquery

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.

Upvotes: 0

Views: 934

Answers (1)

cocco
cocco

Reputation: 16706

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);
}

Upvotes: 1

Related Questions