ajax, javascript and mysql

php_b34st · August 18, 2008

Hi i posted this in the javascript section but am now led to believe that i need to use ajax for this aswell?

I currently have a javascript form, a user enters codes into the form press's submit then the rest of the info is retrieved from a a mysql db using php the user is then asked if this information is correct before proceding.

I would like this to be done instantly using javascript? There is 11 textfields where a user must enter the codes say when they enter the code then click the next box can the info be retrieved from the db and be displayed straight away and so on for all 11 fields? then the user just has to click submit once.

thanks in advance

Davidammit · August 18, 2008

You'll probably need to send the information they do give you to a PHP page, then get the return information from the database. If all would go to my masterplan, I would use responseXML...but I've been having a bit of trouble accessing that and responseText for that matter...

You could then access specific elements by tag name and set them to be the new value of the empty cells. That is...if everything would go to my masterplan of things doing what they're supposed to.

php_b34st · August 18, 2008

Ok, I am a bit closer to where i need to be:

I have an index page with an input box:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form> 
<input type="text" size=6 maxlength=3 class="playername" onchange="showUser(this.value)"/>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

the index page calls the following javascript page to select the player:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

that script calls a php script to display the results:

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

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

mysql_select_db("***", $con);

$sql="SELECT * FROM playerlist WHERE code = '".$q."'";

$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>Code</th>
<th>Name</th>
<th>Club</th>
<th>Price</th>
</tr>";

while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['code'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['club'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "</tr>";
}
echo "</table>";

mysql_close($con);
?>

That all works fine for one input box but i need to display 11 players. If i add another input box it replaces the results from the first input box rather than listing all 11 players in a table. How could I display all 11 instead of just one?

Davidammit · August 18, 2008

lol, you got that from W3Schools.com right?

Thats where I've been learning from and I'd bet you could use responseXML to get specific infomation and access it by box number.

According to the site you could have the PHP part return a XML style document and then access the XML elements by tag name in the JavaScript

<formreturn>
  <text>
     value
  </text>
  <text>
     value
  </text>
  <text>
     value
  </text>
</formreturn>

Then...according to the tutorial, ur supposed to access it like this:

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
xmlDoc=xmlHttp.responseXML;
document.getElementById("text").innerHTML=
xmlDoc.getElementsByTagName("text")[0].childNodes[0].nodeValue;
}
}

Mind you I'm still pretty new at this and when I tried it myself I (for some reason I couldn't figure out) couldn't do the

xmlDoc.getElementsByTagName("text")[0].childNodes[0].nodeValue;

part and thus the whole thing didn't work.

but when i did

document.getElementById("firstname").innerHTML="JUST TEXT"

It worked fine

I believe I may be misunderstanding you, are you trying to change the value of forms to auto-fill out, or are you trying to retrieve information and just display it?

php_b34st · August 18, 2008

neither of those ways work for me. I replaced the whole function but nothing works now

Davidammit · August 18, 2008

Does it display correctly on the PHP page? entering the variable/variables manually

php_b34st · August 18, 2008

It only displays the data for the info in the last input box, and to answer your previous question yes i did get it from w3cschools

Davidammit · August 18, 2008

I've been having trouble with responseText returns as well. I tried to limit the response to 6 rows on the PHP page, and it worked right...on the PHP page.

But then on the main page it displays all the rows instead.

Then I also tried to display something in the format of

<a href="LINK"> EPISODE </a> - DATE ADDED

The whole thing displayed flawlessly on the PHP page, but then on the main page where it was supposed to end up, the first part displayed fine, but then the - DATE ADDED part got cut off.

So I guess we are having similar problems.

php_b34st · August 18, 2008

I can retrieve all of the data without any of it getting cut off, my problem is that it only displays the results from the last text box used replacing what was there for the previous text box instead of listing all 11. The tutorial on w3schools was good for showing me how to do it for a single entry but doesnt go further and show info for multiple entries.

thanks for your help so far

Davidammit · August 18, 2008

So when you search the first time, it displays the results, but when you search it again, it replaces the results from the first one?

When you use the document.getElementByID('id').innerHTML= command, it replaces what is inside the tag you referenced, so I'd make sure that the replacement includes the info from the first search, if you are indeed trying to display all the searches for the session.

If you are trying to get it to continue showing the first and second results, I'd add the responseText onto a variable that stores the response.

fullResponse="";

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
fullResponse=fullResponse + xmlHttp.responseText
document.getElementById("txtHint").innerHTML=fullResponse
} 
}

php_b34st · August 18, 2008

That works now thank you for the help

Davidammit · August 18, 2008

No problem.

I just wish I knew what was going wrong with my script

php_b34st · August 18, 2008

Wish I could help u there but im struggling as it is, just one more question it now displays 11 tables instead of just one with 11 rows ie its showing the following for every result when i only want it showing once:

<table border='1'>
<tr>
<th>Code</th>
<th>Name</th>
<th>Club</th>
<th>Price</th>
</tr>

Davidammit · August 18, 2008

If the Header is going to be the same every time, make it so the PHP side doesn't return that as part of the response. Put it in with the fullResponse variable

fullResponse="<tr>
<th>Code</th>
<th>Name</th>
<th>Club</th>
<th>Price</th>
</tr>";

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
fullResponse=fullResponse + xmlHttp.responseText
document.getElementById("txtHint").innerHTML=fullResponse
} 
}

php_b34st · August 18, 2008

Thanks again that worked except i guess js doesnt like whitespace unlike php? also how do i add </table> to the end?

Davidammit · August 18, 2008

I just left the enters so it was easier to read

fullResponse="<tr>

<th>Price</th>

</tr>";

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

fullResponse=fullResponse + xmlHttp.responseText

fullResponse=fullResponse + "</table";

document.getElementById("txtHint").innerHTML=fullResponse

}

php_b34st · August 18, 2008

Thanks again thats the visual side working now i just gotta do the backend. this may be harder than I originally thought as the variable values do not stay so adding all the prices together cant be done at the end of the php script.

again thanks for all your help

Davidammit · August 18, 2008

No Problem.

If you need to do an adding thing you could send another variable back to the PHP file along with the $q. and have it add that somehow.

But I don't have much of an idea of how to get the result from it in number form so you could resend it for the next one.

php_b34st · August 18, 2008

yes I guess I will have to add the price then send it again etc. back to the original problem when i added

fullResponse=fullResponse + "</table>";

it adds </table> to the end of each row rather than only at the end of the table. i tried to add it after the function but it just missed it out completely

Davidammit · August 18, 2008

Oh...it would do that wouldn't it..LOL.

Don't include the <table> tags in the java

Put them around the <div>

php_b34st · August 18, 2008

for some reason that didnt work but instead of wrapping the div i replaced it with

thanks again for all the help

Davidammit · August 18, 2008

No problem. Glad you solved it.

php_b34st · August 18, 2008

hi again,

while testing further I have found a problem with the script, if a user fills in box's 1 - 5 and then releases they made a mistake in box 3 and change it, the original values stay there aswell as the new one being added. is there a way to stop this?

Davidammit · August 19, 2008

Are you having the user fill out a form and then write it to the database?

php_b34st · August 19, 2008

yes eventually after they have checked they entered the correct team and I do some calculations in php. However I am having troubles creating an array with the relevant data.

Sign In

ajax, javascript and mysql

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information