Jump to content

Archived

This topic is now archived and is closed to further replies.

php_b34st

ajax, javascript and mysql

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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
} 
}

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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
} 
}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

I just left the enters so it was easier to read

 

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

fullResponse=fullResponse + "</table";

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

}

}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

 

Put them around the <div>

Share this post


Link to post
Share on other sites

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

 

<table id="txtHint"></table>

 

thanks again for all the help

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.