distance between postal codes

[Ritual29]

I'm trying to do something with Ajax for the first time, so bear with me.

I've been searching google for some tutorials and I came up with this so far.

 

I'm busy with a script that should return the distance in km's between two postal codes.

I only can't get it to work.

Nothing happens when I leave the field.

getkm.php works fine, I already tested that.

 

Does somebody see what the problem is?

 

 

function Getkmww()
{
    if (document.getElementById("postcodeeindww").length==0)
    {
      document.getElementById("kmww").innerHTML="";
      return;
    }
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("kmww").innerHTML=xmlhttp.responseText;
          }
    }
    var postcodebeginww = document.getElementById("postcodebeginww");
    var postcodeeindww = document.getElementById("postcodeeindww");
    xmlhttp.open("GET","getkm.php?b="+postcodebeginww"&e="+postcodeeindww,true);
    xmlhttp.send();
}

 

And this is the form

 

 

<tr>
                 <td id="adduren_description">Postcodes</td>
                <td id="adduren_fields">
                        <input type="text" name="postcodebeginww" id="postcodebeginww" size="6" value="<?php echo $_POST['postcodebeginww']; ?>">
                        <input type="text" name="postcodeeindww" id="postcodeeindww" size="6" value="<?php echo $_POST['postcodeeindww']; ?>" onblur="Getkmww()">
                </td>
             </tr>
             <tr>
                 <td id="adduren_description">Km Woon-Werk</td>
                <td id="adduren_fields"><input type="text" name="kmww" id="kmww" size="6" value="<?php echo $_POST['kmww']; ?>"></td>
             </tr>

[kicken]

To get or set the value displayed in a text box, you use the .value property, not .innerHTML. .innerHTML is used for grabbing the HTML content between the opening and closing tags of an element. Such a thing doesn't apply to an <input> because it has no html content.

 

document.getElementById("kmww").value='';

var postcodebeginww = document.getElementById("postcodebeginww").value;

[Ritual29]

ok, I didn't know that.

 

I edited my code to what you suggested.

But it's still not working.

 

this is what I have now

 

 

function Getkmww()
{
    if (document.getElementById("postcodeeindww").length==0)
    {
      document.getElementById("kmww").value='';
      return;
    }
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
            document.getElementById("kmww").value=xmlhttp.responseText;
          }
    }
    var postcodebeginww = document.getElementById("postcodebeginww").value;
    var postcodeeindww = document.getElementById("postcodeeindww").value;
    xmlhttp.open("GET","getkm.php?b="+postcodebeginww"&e="+postcodeeindww,true);
    xmlhttp.send();
}

[Irate]

Just a quick suggestion (more like urging you to do it), use jQuery for anything even remotely related to Ajax. It makes everything a lot easier.

 

If getkm.php works fine, then you might call it like this with jQuery: $.get('/getkm.php'{b:postcodebeginww,e:postcodeeindww},function(data){});

In the function(data){} part you handle the response. You could use .done(function(data){}), too, whichever you prefer.

And look uo the jQuery documentation in general.