Ritual29 Posted January 1, 2014 Share Posted January 1, 2014 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> Quote Link to comment Share on other sites More sharing options...
kicken Posted January 1, 2014 Share Posted January 1, 2014 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; Quote Link to comment Share on other sites More sharing options...
Ritual29 Posted January 1, 2014 Author Share Posted January 1, 2014 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(); } Quote Link to comment Share on other sites More sharing options...
Irate Posted January 2, 2014 Share Posted January 2, 2014 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.