Member Avatar for passioncoder

Hi Coders,
I am really in need of your help......

Table of contents are available with action buttons,
When i click on a particular action button say for examble edit,the id of that particular row should be passed to the edit space,so that i can pull all other values from the database for editing.....(Here we are not loading any new page....all the code is in the same page)
Here i used javascript to pass the value but as php is running in the server side and javascript in the client side,the value is passed only after the second click....

Thanks for your help in advance.....

Regards,
Passion Coder.

  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by passioncoder

Dani AI

Generated

— the root issue is that PHP runs once on the server and the page you see in the browser is static until JavaScript changes the DOM or you make a new request. That means you cannot rely on a server-side $info changing when the user clicks an image. Two safe options: 1) render each row with safe data-* attributes and populate a single edit form on the client, or 2) send the row id to the server with AJAX and load the current row as JSON, then fill the form.

A compact, maintainable pattern (no page reload) — output one edit form outside the loop and give each edit button the row id/name. On click copy those values into the form and show it:

<!-- inside the loop -->
<tr>
  <td><?php echo $var; ?></td>
  <td><?php echo htmlspecialchars($info['instiname']); ?></td>
  <td>
    <button type="button" class="edit-btn"
      data-id="<?php echo (int)$info['id']; ?>"
      data-name="<?php echo htmlspecialchars($info['instiname'], ENT_QUOTES); ?>">
      Edit
    </button>
  </td>
</tr>
// single listener fills and shows the edit form
document.addEventListener('click', function(e){
  if (!e.target.classList.contains('edit-btn')) return;
  var id = e.target.dataset.id;
  var name = e.target.dataset.name;
  document.getElementById('edit-id').value = id;
  document.getElementById('edit-name').value = name;
  document.getElementById('columnDetails').style.display = 'none';
  document.getElementById('editContent').style.display = '';
});

Use a hidden <input id="edit-id"> and <input id="edit-name"> in the #editContent form. If you need the freshest DB values (more fields, related tables), call a small endpoint (e.g., get-row.php?id=...) that returns JSON and populate the form from that response. Also: never use deprecated mysql_* functions — switch to PDO or mysqli with prepared statements, and always escape data placed into HTML attributes to prevent XSS.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

You will need to show what you have. Paste the relevant pieces of code, or the url if you have this online somewhere.

Member Avatar for passioncoder 
<table>
    <tr>
    <td>
    S.No
    </td>
    <td>
    Column Name
    </td>
    <td>
    Action Buttons
    </td>
    </tr>
    <?php
    if($_POST['term'])
    {
    $data = mysql_query("SELECT * FROM institute where instiname like '%$term%'")
    or die(mysql_error());
    }
    else
    {
    $data = mysql_query("SELECT * FROM institute")
    or die(mysql_error());
    }
    $var =1;
    while($info = mysql_fetch_array( $data ))
    {
    ?>
    <tr>
    <td>
    <?php echo $var;?>
    </td>
    <td>
    <?php echo $info['instiname'] ;?>
    </td>
    <td>
    <img src="images/b_edit.png" title="Edit">
    </td>
    </tr>
    </table>
    <?php
    }
    ?>

Here when i click on the edit image,a form should open with

<form>
   Column Name:
   <input type="text" name="ColumnName" value="<?php echo $info['instiname'] ; ?>" />
   </form>

And this form should be in place of our table above....(Replace table with edit form once image(action button) is clicked)And also the id of that particular row should be passed.So that it can be updated to the db again.

I tried to replace using show hide div. as follows and its working:

<div id="columnDetails">
 <table>
    <tr>
    <td>
    S.No
    </td>
    <td>
    Column Name
    </td>
    <td>
    Action Buttons
    </td>
    </tr>
    <?php
    if($_POST['term'])
    {
    $data = mysql_query("SELECT * FROM institute where instiname like '%$term%'")
    or die(mysql_error());
    }
    else
    {
    $data = mysql_query("SELECT * FROM institute")
    or die(mysql_error());
    }
    $var =1;
    while($info = mysql_fetch_array( $data ))
    {
    ?>
    <tr>
    <td>
    <?php echo $var;?>
    </td>
    <td>
    <?php echo $info['instiname'] ;?>
    </td>
    <td>
   <!-- <img src="images/b_edit.png" title="Edit">-->
    <input type="image" src="images/b_edit.png"              onclick=if(document.getElementById('editContent').style.display=='none') 
        {                                                       document.getElementById('editContent').style.display='';
                                                    document.getElementById('columnDetails').style.display='none';
        }
        else
        {
        document.getElementById('editContent').style.display='none';
        document.getElementById('columnDetails').style.display='';
        }
    </td>
    </tr>
    </table>
    <?php
    }
    ?>
</div>

The div to be replaced is

 <div id="editContent" style="display: none;" >
<form>
Column Name:
<input type="text" name="ColumnName" value="<?php echo $info['instiname'] ; ?>" />
</form>
</div>

Now help me to pass the id of the column name selected/clicked to the edit form.

Thanks & Regards,
Passion Coder.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.