how to apply ajax on php code

Question

I am trying to apply ajax to my php code. However, when I click on the button I can't get any response. This means the ajax function I declare is not being called onclick.

<?php
$s_name= $_POST["submit"];

mysql_connect("localhost","root","");//database connection
mysql_select_db("itcompanylist");

$query  = "SELECT s_id FROM states WHERE `state_name` = '$s_name'";
$result1 = mysql_query($query);
$row = mysql_fetch_array($result1);
$result2 = mysql_query("SELECT city_name FROM `city` WHERE s_id ='".$row['s_id']."'");

$i = 0;

echo "<form method='post'  name='myForm'><table border='1' ><tr>";

while ($row = mysql_fetch_row($result2)){
  echo '<td><input type="submit" name="submit" onclick="ajaxFunction()" value="'.$row['0'].'"></td>'; 

  if ($i++ == 2) 
  { 
    echo "</tr><tr>";
    $i=0;
  }
}


echo "</tr></table></form>";    
echo "<div id='ajaxDiv'>Your result will display here</div>";       
?>

ajax code:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
 var ajaxRequest;  // The variable that makes Ajax possible!

 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }

 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
      var ajaxDisplay = document.getElementById('ajaxDiv');
      ajaxDisplay.value = ajaxRequest.responseText;
   }
 }
 var s1 = document.getElementById('submit').value;

 var queryString = "?submit=" + s1 ;

 ajaxRequest.open("GET", "" + 
                              queryString, true);
 ajaxRequest.send(null); 
}
//-->
</script>

You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 20 '13 at 13:35

score 2 · Accepted Answer · answered Mar 20 '13 at 13:37

2

Your submit button will submit the form and leave the page before the Ajax request has been processed.

Bind your event handler to the form's submit event, and prevent the default action.

function ajax(event) {
    // Send Ajax request here
    event.preventDefault();
}
var frm = document.getElementsByName('myForm')[0]; // Better to use an ID. Don't write HTML 3.2
frm.addEventListener('submit', ajax);

answered Mar 20 '13 at 13:37

Quentin

914,110
126
1,211
1,335

which think write in the place on (event)? – Nikunj Jagad Mar 20 '13 at 13:41
@NikunjJagad — You can use any variable name you like but `event` is a good one (since the argument the function receives is [an event object](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event)) – Quentin Mar 20 '13 at 13:51

score 0 · Answer 2 · answered Mar 20 '13 at 13:41

0

Use onclick="return ajaxFunction()" and event.preventDefault(); to avoid default form submission.

answered Mar 20 '13 at 13:41

Arvind

938
9
23

how to apply ajax on php code

2 Answers2