Question

I’ve got a problem with passing GET variable to another PHP page. I’ve got a simple table of content. I would like to delete rows by using ajax. Ajax works perfectly on simple example with form.

Here is a markup:

    while($row=mysql_fetch_array($query))
    {
/*here are rows(content) */

        <form action='#' method='get' onsubmit='deleteContent(); return false'>
        <td><input type='hidden' name='delete' value='$row[id_content]' id='delete' />
        <input type='submit' class='del'  name='delete' title='Delete' value='Delete' /></td>
        </tr></form>";  
    }

When I press the submit it always return 1.
Here is the DeleteContent

  function deleteContent()//za brisanje dela
{
    try
    {
        xhr = new XMLHttpRequest();
    }
    catch (e)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xhr == null)
    {
        alert("Vaš brskalnik ne podpira AJAX-a!");
        return;
    }
    var url = "delete.php?delete=" + document.getElementById('delete').value;

    xhr.onreadystatechange = handler2; 
    xhr.open("GET", url, true);
    xhr.send(null);
}

function handler2()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)

            document.getElementById("delete").innerHTML = xhr.responseText;
        else
            alert("error!");
    }
}

And here is the delete.php

            <?php
            echo "<span>Content delete</span><br/>";
            if($_GET['delete'])
            {echo $_GET['delete'];}

    ?>

Does anyone know where is the problem?

Answer 1

an ID has to be unique in a document.

document.getElementById('delete') will always point at the same element.
Provide the used form as argument to deleteContent() and you will be able to retrieve the correct value:

<form action='#' method='get' onsubmit='return deleteContent(this);'>

….

function deleteContent(form)//za brisanje dela
{
    try
    {
        xhr = new XMLHttpRequest();
    }
    catch (e)
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xhr == null)
    {
        alert("Vaš brskalnik ne podpira AJAX-a!");
        return;
    }
    var url = "delete.php?delete=" + form.delete.value;

    xhr.onreadystatechange = handler2; 
    xhr.open("GET", url, true);
    xhr.send(null);
    return false;
}

What else: Your markup appears to be invalid, use e.g.

while($row=mysql_fetch_array($query))
    {
/*here are rows(content) */

        echo "<tr><td>
              <form action='#' method='get' onsubmit='return deleteContent(this);'>
               <input type='hidden' name='delete' value='{$row[id_content]}' id='delete' />
               <input type='submit' class='del'  name='delete' title='Delete' value='Delete' />
              </form>
             </td></tr>";  
    }