displaying an element in echo command of php when mouseover on an element within same echo command

Question

Now, I'm having output of some mysql table by PHP. I'm using "echo command" for displaying results.

I want an element within that echo to be displayed when I mouseover another element within that echo.

When I use javascript onmouseover function, it disappears the whole echo command's output.

Please any1 tell me what is wrong & what I should do for this.

My code is below:

    <head>
    <title>Untitled Document</title>
    <script language="javascript">
    function remove()
    {
    document.getElementById('delete').style.display = "block";
    }

    </script>
    </head>

    <body>

    <?php
    $con = mysql_connect("localhost","me_user","123456");
    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("my_db", $con);
    $result = mysql_query("SELECT * FROM table ORDER BY serial desc");

    while($row = mysql_fetch_array($result))
    {

    {

    echo "<div id='show' onmouseover='javascript:remove();'>
             <table border='0'  cellpadding='4'>
               <tr>
                 <td>".$row['fname']."&nbsp;".$row['lname']."&nbsp;".$row['content']
                 ."<br>"
                 .$row['date']."
                 </td>
               <td align='right'>
                 <div id='delete' style='display:none'>
                   <form method='post' action='delete.php id='delete''>
                    <input type='hidden' name='delete' value='".$row['serial']."'>
                    <a href='javascript:submit();'>x</a>
                   </form>
                 </div>
              </td>
            </tr>
         </table>";
    echo "</div>";
   }
    echo "<br><hr size='1' color='#DFDFDF'><br>";
   }

     mysql_close($con);
     ?>

      </body>
      </html>

As it's clear from above code, the div with id delete is hidden in starting. I want then when I mouseover on the div with id show, the div with id delete should be shown.

Please somebody tell how it's done, coz when I use javascript as in the above code the div with id show itself is disappeared & nothing else happens.

Please help me.

Thanks in advance

sorry, all there is right now in your code is an echo "</div>"; that closes a div tag. Please explain where the other divs lie. Thanks — Igbanam
– Igbanam, Commented Jul 31, 2011 at 9:26
Please check the below question to get your answer stackoverflow.com/questions/1449574/… — Hardik
– Hardik, Commented Jul 31, 2011 at 9:29

user447356 · Accepted Answer · 2011-07-31 09:40:36Z

You need to give unique ID to each <div> then use this ID to show/hide only one specific element.

Most simple way is by adding the current index in the loop to the ID, then pass this index to the JS function.

I'm not familiar with PHP, but code should be something like:

<div id='delete_[add current index of PHP loop here]' style='display:none'>

Which will generate for example:

<div id='delete_1' style='display:none'>
...
<div id='delete_2' style='display:none'>

Then change the function call to:

<div id='show' onmouseover='javascript:remove([add current index of PHP loop here]);'>

Which will generate for example:

<div id='show' onmouseover='javascript:remove(1);'>
...
<div id='show' onmouseover='javascript:remove(2);'>

Then finally, change the function to:

function remove(index)
{
    document.getElementById('delete_' + index).style.display = "block";
}

Hope this makes sense, let me know if the logic is not clear enough.

ThatGuy · Accepted Answer · 2011-07-31 09:45:17Z

Here is the working example. I'm using data from plain arrays instead of mysql db.

<html>
<head>
    <title>Untitled Document</title>
    <script language="javascript">
        function remove(counter) {
            document.getElementById('delete'+counter).style.display = "block";
        }
    </script>
</head>


<body>

<?php
    $result = array(
        array(
            'fname' => 'some fname 1',
            'lname' => 'some lname 1',
            'content' => 'some content 1',
            'date' => 'some date 1',
            'serial' => 'some serial 1'
        ),
        array(
            'fname' => 'some fname 2',
            'lname' => 'some lname 2',
            'content' => 'some content 2',
            'date' => 'some date 2',
            'serial' => 'some serial 2'
        )
    );

    $i = 0;
    foreach($result as $row){
        $i++;
        echo "<div id='show' onmouseover='javascript:remove($i);'><table border='0'  cellpadding='4'><tr><td>"
            . $row['fname']."&nbsp;".$row['lname']."&nbsp;".$row['content']."<br>".$row['date']
            . "</td><td align='right'><div id='delete$i' style='display:none'><form method='post' action='delete.php id='delete'><input type='hidden' name='delete' value='"
            . $row['serial']."'><a href='javascript:submit();'>x</a></form></div></td></tr> </table>"
            . '</div>'
            . "<br><hr size='1' color='#DFDFDF'><br>";
    }
 ?>

</body>
</html>

Your problem was in that html id must be unique.

Collectives™ on Stack Overflow

displaying an element in echo command of php when mouseover on an element within same echo command

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related