Jump to content

distance between postal codes


Ritual29

Recommended Posts

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>
Link to comment
Share on other sites

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;
Link to comment
Share on other sites

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();
}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.