按钮单击更新数据库[关闭]

I have been struggling with this for a few days. I have a webpage that has a table of dynamically created data on it (using php and datatable). Everything works great. Now I have 2 columns with buttons for each row :

NAME | ADDRESS   | STAGE | ASSIGN  
John   9 Doe Way   btnS     btnA

All I want to do is when the user clicks the btnS or btnA run a simple update query and put that person that is clicked into the stage or assign category for this activity. (I can handle that part in the database). I can do this fine if I have a hyperlink instead of buttons. I want the page to refresh, because the will remove the name from my list.

So how do I get the ID of the row of the dynamically created button? I have a hidden field for ID if needed.

I would paste code, but I have no idea the correct direction. I have tried jquery (function), form POST function, but nothing seems to work?

Thanks!!

You can insert an onclick attribute to your button like this:

<button onclick="location.href='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML" />Delete</button>

There's another solution also:

<form action="">
  <input type="submit" name="SaveChanges" value="Delete" onclick="this.form.action='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML;" />
</form>

So..

<table>
  <tr><th>ID</th><th>Address</th><th>Delete</th></tr>
  <tr><td id="id">1</td>
      <td>John</td>
      <td>9 Doe Way</td>
      <td><button onclick="location.href='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML" />Delete</button></td></tr>
</table>

You can make use of AJAX request, have a php code that gives you the names and adresses in JSON format and another code that updates the database. Get rid of the php code you have to create the table, and make it via Javascript. Then you will be able to dynamically change the table without the need of page refresh. It will make your site lighter for your server.

EDIT: You can see r3mus comment under your question who gives you some hints too.

There are several ways to handle this. In saying that you can do this with a hyperlink, I assume you are simply navigating to a URL.

I will give you 3 options:

Option 1:

Use a hyperlink, but use CSS to make it look like a button.

Something along the lines of

a
{
    display:inline-block;
    padding: 2px 5px;
    background-color: #ccc;
    border: 1px solid #000;
    text-decoration:none;
}

a:active
{
    background-color:blue;
}

Will make it look a bit more like a button.

Option 2:

Using jQuery, you can simply bind a redirection to the click event:

$("a").click(function(){

    parent.location = url;

});

Option 3:

Using a form, you can submit to the URL using a submit button.

<form action="your url here">
    <input type="submit" value="Submit"/>
</form>

Any of these options will produce your desired result.

Ahh, seeing your bit about getting the row ID dynamically -- totally different answer. In the dynamically output html (via php) output data-rowid=$rowID onto the button element; using jQuery, you can retrieve the data property by utilizing $(this).data('rowid') in the button's click event.

For example, you would end up with something like this, with data-rowid incrementing for each row output:

<td>myDataBaseDetails....</td><button class='buttonClass' data-rowid='15'>Click!</button>
<script>
$('.buttonClass').click(function() {
    var id = $(this).data('rowid');
    //update your database with AJAX
    $.ajax({
        url: "http://www.yoursite.com/script.php?rowid=" + id
    }).done(function() {
        location.reload();
    });
});
</script>