current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

I am a newbie in web base applications development and Im learning AJAX. Here is my problem, I'm trying to make an AJAX request with some variables (user inputs) and get the php file with the same variables. Below is my code, if there something I am missing or I am doing wrong please let me know, I will appreciated any help! Thank you.

Javascript code:

<script type="text/javascript">
function ajaxFunction(){
var ajaxRequest;
try{
  ajaxRequest = new XMLHttpRequest();
 }catch (e){
   try{
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
     }catch (e) {
  try{
     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }catch (e){
    document.getElementById("Alert").innerHTML= "*Your browser broke!";
    document.getElementById("Alert").style.color = '#E00000 ';
     return false;
   }
  }
 }
  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('display');
      ajaxDisplay.value = ajaxRequest.responseText;
     }
   }
 var input_building = document.getElementById('building').value;
 var input_room = document.getElementById('room').value;
 var queryString = "?building=" + input_building + "&room=" + input_room;
 ajaxRequest.open("GET", "map.php" + queryString, true);
 ajaxRequest.send(); 
}
 </script>

HTML:

  <select id="building" name="building">
     <option value="#" default >Select</option>
     <option value="Luis C. Monzon">Luis C. Monzon</option>
  </select>
  <input type="text" id="room" name="room" placeholder="eg. 208B / CH 116" >
  <input id="submit" type="button" value="submit" onclick="ajaxFunction()" >
  <p id="display"></p>

PHP file:

<?php>
  $building = $_GET['building'];
  $room = $_GET['room'];

  echo "<h1>".$room." ".$building."</h1>";
  ?>
share|improve this question
    
What is the result you're getting? What exactly isn't working? –  thaJeztah Feb 2 '13 at 21:51
2  
Have you heard of jQuery? –  mimipc Feb 2 '13 at 21:52
2  
Change ajaxDisplay.value to ajaxDisplay.innerHTML –  mplungjan Feb 2 '13 at 21:53
    
Disregard my answer rofl. :P –  keyboardSmasher Feb 2 '13 at 21:57
1  
Ok, sorry, jQuery wouldn't solve the problem. I just find it easier for beginners to learn AJAX concepts (even if it's a good thing to know the underlying code). I wanted to suggest jQuery as he said he was a newbie, but I totally agree with your posts. –  mimipc Feb 2 '13 at 23:46

2 Answers 2

up vote 0 down vote accepted

You are setting a value property on a <p> element. You should be setting its innerHTML. Value is used for input fields.

document.getElementById('display').innerHTML = ajaxRequest.responseText;
share|improve this answer
up vote 0 down vote

As requested, I will post my comment

In your code you need to change ajaxDisplay.value to ajaxDisplay.innerHTML - as elaborated by Juan, form fields have values and container tags have innerHTML.

To defend the use of jQuery a little - I basically agree that for simple JavaScript, loading an external library can be overkill - in the case of Ajax, I trust jQuery to cover all browsers needs.

Your code with jQuery:

<!DOCTYPE html>
<html>
<head>
<title>Get building</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() { // run onload
  $("ajaxbutton").on("click",function() {
    var input_building = $('building').val();
    var input_room = $('room').val();
    var queryString = "?building=" + input_building + "&room=" + input_room;
    $("#display").load("map.php" + queryString); // get the room 
  });
});
</script>
</head>
<body>
<select id="building" name="building">
  <option value="#" default >Select</option>
  <option value="Luis C. Monzon">Luis C. Monzon</option>
</select>
<input type="text" id="room" name="room" placeholder="eg. 208B / CH 116" />
<input id="ajaxbutton" type="button" value="Find Building" />
<p id="display"></p>
</body>
</html>

NOTE: for more control over the result you can change the load to

    $.get("map.php" + queryString,function(data) {
      // do something with data here - for example if you use JSON
      $("#display").html(data);
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.