save values from html table to database

Question

i have a html table that displays values from the database. I have a javascript that enables me to edit this data but then i cant figure out how to save it back to the database using php. i found some information that i should use xmlhttprequests but i have no idea on how to do this. Any suggestions? Your help is highly appreciated. Code below;

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript"><!--

    function edit_input(obj) {
    var is_checked = obj.checked;
    while (obj.tagName!='TR')
    obj = obj.parentNode;

    var td = obj.getElementsByTagName('TD');
    var len = td.length;

    if (!is_checked) {

    for (var i=0; i<len; i++)
    if (td[i].className=='editable')
    td[i].innerHTML = td[i].firstChild.value;


    } else {

    var input;

    for (var i=0; i<len; i++)
    if (td[i].className=='editable') {
    input = document.createElement('INPUT');
    input.value = td[i].innerHTML;
    td[i].innerHTML = '';
    td[i].appendChild(input);
    }
    }

    }


    --></script>


    </head>

    <body>
    <table border="1">
    <tr>
         <th width="56">Branch ID</th>
    <th width="75">Branch Name</th>
         <th width="75">Branch Personnel</th>                            
         <th width="105">Branch Headquaters</th>
    <th width="50">Edit</th>
    </tr>
<?php

$result = mysql_query($query );
    while ($row= mysql_fetch_array($result)) { ?>
         <tr>
             <td class="editable"><?php echo $row['branchid'];?></td>
             <td class="editable"><?php echo $row['branchname'];?></td>     
             <td class="editable"><?php echo $row['branchpersonnel'];?></td>
             <td class="editable"><?php echo $row['branchhq'];?></td>   
        <td><input type="checkbox" onclick="edit_inpu(this);">Edit</td>  
         </tr>                                          
<?php } ?>
    <tr><td><input type="submit" name="editbranch" class="button2"       value="Update"/></td></tr> 
</table>    
    </body>
    </html>

You need to learn AJAX see w3schools.com/php/php_ajax_intro.asp — Rupesh Pawar
– Rupesh Pawar, Commented Nov 16, 2011 at 13:29
w3fools.com ... maybe have a look there once you've looked at w3schools — Aaron Lee
– Aaron Lee, Commented Nov 16, 2011 at 13:30
@RupeshPawar - You should probably avoid recommending w3schools. It has some serious problems. — Polynomial
– Polynomial, Commented Nov 16, 2011 at 13:31
AJAX on Mozilla Developer Network (MDN): developer.mozilla.org/en/AJAX — ComFreek
– ComFreek, Commented Nov 16, 2011 at 13:36

Ikke · Accepted Answer · 2011-11-16 13:59:12Z

2

If using jQuery is not a problem, maybe using something like JEditable is a solution. When you click on a cell in a table, it turns into a textfield, and when pressing enter or leaving focus, it makes a webrequest to the server, where you can make the changes.

See for example this jsfiddle script. It's really easy to use. The only other thing you would need to do is to give the table cells an id, which gets sent to the page you are saving it too.

edited Nov 16, 2011 at 13:59

answered Nov 16, 2011 at 13:29

Ikke

102k23 gold badges101 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nas Over a year ago

Hi Ikke, thank but as simple as using jquery is i have not used it before. i know i should learn it, and i will but i cant apply it now. any other ideas?

Ikke Over a year ago

Learning jQuery is easier than learning javascript and XHR. This component handles all the work for you.

Polynomial · Accepted Answer · 2011-11-16 13:30:29Z

0

Have your script fire off an Ajax request through XMLHttpRequest to a PHP script that saves the values back to the database.

The URL could be something like this: updatetable.php?row=0&col=0&data=1234

answered Nov 16, 2011 at 13:30

Polynomial

28.4k13 gold badges86 silver badges110 bronze badges

4 Comments

Nas Over a year ago

am trying to understand you but somehow am lost. so i should have a separate php script that does the update then address my update button as updatetable.php?row=0&col=0&data=1234 ? what does this mean?

Polynomial Over a year ago

No, you should use Ajax to fire off a HTTP request to the script. See the XMLHttpRequest documentation I linked.

Nas Over a year ago

i get it now but could you please explain the url part more?how can i customize the url to get the data from the table and post it to the update.php page?

Polynomial Over a year ago

You could serialize the table data into a JSON string and send it as a POST parameter.

workdreamer · Accepted Answer · 2011-11-16 13:33:02Z

0

You could use jquery, is very popular.

you have to download the lib and include-it on the header

http://code.jquery.com/jquery-1.7.min.js

and here it's how you use a ajax request with jquery:

http://api.jquery.com/jQuery.ajax/

The url param is your location to send the values to save them like the post.

answered Nov 16, 2011 at 13:33

workdreamer

2,8861 gold badge37 silver badges37 bronze badges

Collectives™ on Stack Overflow

save values from html table to database

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related