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

PHP Code:


			

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

Code:

<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><!-- form isn't really used here -->
<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:

Code:

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

kevinkhan · 06-21-2012, 09:30 PM

Quote:

Originally Posted by Old Pedant

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:

Code:

<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><!-- form isn't really used here -->
<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:

Code:

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

Thats exactly what i needed thanks VERY MUCH

this is probably asking to much but is there any easy way of getting rid of the table row when i click the button...

im looking at this tutorial http://tutorialzine.com/2010/03/ajax...php-mysql-css/ but jez it is way to complicated for me

Old Pedant · 06-22-2012, 02:26 AM

Oh, trivial.

Change the <input> to this:

Code:

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

Code:

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

Quote:

Originally Posted by Old Pedant

Oh, trivial.

Change the <input> to this:

Code:

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

Code:

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.

Thats very good fair play to you.

Thanks very much really appreciate it.
I really have to start learning java script. its cool the stuff you can do