simple AJAX problem

kevinkhan

06-21-2012, 08:49 PM

How do i send the id of a submit button in a form.

The will be a couple of 100 form buttons in the loop so i want to send the id of the button that is click.

here is the code i have so far.

if anyone can help please do. Thanks

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
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();
}
</script>
</head>
<body>

<table border="1">
<tr>
<th>Viewed</th>
<th>Event</th>

<th>id</th>

showUser(this.value)

<?php
$sql = "SELECT * FROM events WHERE `show` = 'yes' AND date > now() ORDER BY date ASC";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
$id = $row['id'];
echo <<<HTML
<tr>
<td>
<form name="contact" method="post" action="">
<div>
<input type="submit" name="action" value="Viewed"/>
</div>
</form>
</td>
</tr>
HTML;
}

?>
</body>
</html>

Old Pedant

06-21-2012, 09:15 PM

Okay, for starters, you can't use a submit button. If you do, the <form> *WILL* be submitted!

Just use an ordinary button.

And then it's trivial:

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
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();
}
</script>
</head>
<body>
<div id=="txtHint"></div>

<form>
<table border="1">
<tr>
<th>Viewed</th>
<th>Event</th>
<th>id</th>
</tr>
<?php
$sql = "SELECT * FROM events WHERE `show` = 'yes' AND date > now() ORDER BY date ASC";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
{
$id = $row['id'];
?>
<tr>
<td>
<input type="button" value="Viewed"
onclick="showUser(<?php echo $row["id"]; ?>)" />
</td>
<td>
<?php echo $row["event"]; ?>
</td>
<td>
<?php echo $row["id"]; ?>
</td>
</tr>
<?php
}
?>
</table>
</form>
</body>
</html>

I guessed at what you wanted to show in the second and third <td>s in the rows.

You had headings for three columns, so you should have 3 columns in each row, of course.

The above assumes that your $row["id"] is a number. If not, you need to change the onclick slightly:

onclick="showUser('<?php echo $row["id"]; ?>')" />

kevinkhan

06-21-2012, 09:30 PM

Old Pedant

06-22-2012, 02:26 AM

Oh, trivial.

Change the <input> to this:

<input type="button" value="Viewed"
onclick="showUser(this,<?php echo $row["id"]; ?>)" />

(again, put apostrophes around the php echo if the id is not a number)

And then change the function:

function showUser(inp,str)
{
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();

var node = inp.parentNode;
while ( node != null )
{
if ( node.tagName == "TR" )
{
node.parentNode.removeChild( node );
break;
}
node = node.parentNode;
}
}

Stuff in red is new. Nothing removed, just added.

kevinkhan

06-22-2012, 09:44 AM