Ajax-MySql-Php issue (submit text from form, send via AJAX to php script, back to div)

Question

I would like to send data to a MySql DB from a form via AJAX and a PHP script. I can get it perfect using option selection in the form, but I simply cannot get it using a text submit form.

First what works:

HTML Form:

<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
</select>
</form>

.js Scipt:

function showUser(str)
{
        if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}

PHP Script:

<?php
$q=$_GET['q'];

$con = mysql_connect('localhost', 'root');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("ajax_demo", $con);

$sql="SELECT * FROM emp WHERE id = '$q'";

$result = mysql_query($sql);

$i = 0;

echo "<table class=\"table-master\">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  $i++;
  echo "<tr class=\"d".($i & 1)."\">";
  echo "<td>" . $row['FirstName'] . "</td>";
  echo "<td>" . $row['LastName'] . "</td>";
  echo "<td>" . $row['Age'] . "</td>";
  echo "<td>" . $row['Hometown'] . "</td>";
  echo "<td>" . $row['Job'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

What I want to do is to have a text field in my HTML which will be filled out by the user when the user hits 'submit', that information gets passed into the js script containing the AJAX segment, gets queried by the DB and the results are outputed into my DIV.

Where I think I am going wrong - cannot use onchange obviously in the form when using a text form for submition. Has to be onsubmit !? The js script works so therefore I think my AJAX part is fine. The PHP script also works but again, everything breaks down as soon as I try to get text input from the form. Perhaps my js script is not set up to capture the incoming text form variables!? Any help / guidance would be appreciated.

Ben · Answer 1 · 2011-09-22 16:48:32Z

First of all, I'm lazy and use jquery. But If you have multiple inputs in your form, the best way is to use an onsubmit handler, or an onclick handler on your submit button.

You have to get each elements value, and build your query string appropriately:

<form>
<select id="users" name="users">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
</select>
<input id="textfield" name="textfield" type ="text" />
<input type="submit" value="process" onclick="showUser()" />
</form>


    function showUser()
{
var sel = document.getElementById('users');
var selvalue = sel.options[sel.selectedIndex].value;
var textfield = document.getElementById('textfield').value;

        if (selvalue=="" || textfield = "")
  {
 document.getElementById("txtHint").innerHTML="";
  return false;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
}

xmlhttp.open("GET","getuser.php?q=" + selvalue + "&t=" + textfield,true);
xmlhttp.send();
return false;
}

You have to check for the T variable in your php script and do whatever you want with it. Please Please Please sanitize your inputs before interacting with the database.

you should cast to int, and use mysql_real_escape_string() or parameterized queries.

I'm assuming this works. I am used to Jquery where I would just serialize the form and forget about it.

I'm sure somebody has a much better way to do this - I don't know javascript that well.

Hey Ben, thank you for your time. This was very usefull and informative. I must begin to get my mind around Jquery some time soon. Once again, thank you for your help.

Melsi · Answer 2 · 2011-09-22 17:15:14Z

If you want XmlHttp here it is how I do it for one text field, add more you self. Make a test table named emp with 5 fields f1,f2,..,f5 and this will work:

index.htm

<html>
<head>
<script type="text/javascript">

var request = false;
try { 
  request = new XMLHttpRequest(); 
} catch (trymicrosoft) {                         
  try { 
    request = new ActiveXObject("Msxml2.XMLHTTP"); 
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {                  
      request = false;       
    }
  }
}

if (!request) 
  alert("Error initializing XMLHttpRequest!"); 
</script>

<script type="text/javascript">
   function getEmp(emp) 
   { 
        document.getElementById('results').innerHTML="Please wait..."; 

        //we will call asychronously getData.php 
        var url = "getEmp.php";
        var params = emp;//no url parameters
     var params = "empField=" +emp+"";
        request.open("POST", url, true);//use post for connect harder to attack, lots of data transfer 

        //Some http headers must be set along with any POST request.
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        request.setRequestHeader("Content-length", params.length);
        request.setRequestHeader("Connection", "close");

        request.onreadystatechange = updatePage;
        request.send(params);

   }////////////////////

   //You're looking for a status code of 200 which simply means okay.
   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) 
       {   
            document.getElementById('results').innerHTML=request.responseText;   
       } 
       else{
         //alert("status is " + request.status);
         }
     }
   }

</script>
</head>
<body >


Write employ name: <input type="text" name="emp" id='empField' value='John'/>
<span style="background-color:blue;color:yellow;"  
onClick="getEmp(document.getElementById('empField').value )"/>
Click to find
</span>

<div id="results">

</div>


</body>
</html>

getEmp.php

<?PHP

 mysql_connect('localhost', 'root',''); 
mysql_select_db("ajax_demo" );

$sq='\'';
$sql="SELECT * FROM emp WHERE f1 = ".$sq.$_POST['empField'].$sq." ";

$result = mysql_query($sql); 
$row = mysql_fetch_row($result);

?>

<table border=4>
<tr><td>Field 1</td><td>Field 2</td><td>Field 3</td><td>Field 4</td><td>Field 5</td></tr>
<tr>
    <td><?PHP echo $row[0]; ?></td>     <td><?PHP echo $row[1]; ?></td> 
    <td><?PHP echo $row[2]; ?></td>     <td><?PHP echo $row[3]; ?></td> 
    <td><?PHP echo $row[4]; ?></td>     
<tr>
</table>

asked	1 year ago
viewed	1308 times
active	1 year ago

Ajax-MySql-Php issue (submit text from form, send via AJAX to php script, back to div)

HTML Form:

.js Scipt:

PHP Script:

2 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged php javascript mysql ajax forms or ask your own question.

Community Bulletin

Ajax-MySql-Php issue (submit text from form, send via AJAX to php script, back to div)

HTML Form:

.js Scipt:

PHP Script:

2 Answers

Your Answer

Sign up or login

Post as a guest

Not the answer you're looking for? Browse other questions tagged php javascript mysql ajax forms or ask your own question.

Community Bulletin

Related