So, I have this site, and I created some buttons that makes cells in the table row editable: https://i.sstatic.net/HWMiw.jpg
After the user edits whatever cells he wants, he should press "Save" button, as you see in the picture. Now I want to get whatever he wrote in those cells and send it to a PHP file, where every variable referring to a cell that the user edit will be validated. If they all are validated in the end, I update a SQL database with these new values.
Is there a way of doing this? Here is my script and some of the php:
<script> var buttons = document.getElementsByClassName("clicker"); var buttonclicked = function(e){ if(e.target.textContent == "Edit") { e.target.textContent = "Save"; var id = e.target.id; var editable_elements = document.querySelectorAll("[contenteditable=false]"); for(var i = (id*7); i < (id*7)+7; i++){ editable_elements[i].setAttribute("contentEditable", true);} } else { e.target.textContent = "Edit"; var id = e.target.id; var editable_elements = document.querySelectorAll("[contenteditable=true]"); for(var i = (id*7); i < (id*7)+7; i++){ editable_elements[i].setAttribute("contentEditable", false);} } }; for(var j = 0; j < buttons.length; j++) { buttons[j].addEventListener('click', buttonclicked); } </script> PHP (to show why I need to pass this variables to it):
else if($_POST["criteria"] == 3 && (!empty($_POST["g3"]) || !empty($_POST["g4"]))) { apologize("This can not happen..."); } if(empty($_POST["g1"])) $g1 = -1; else $g1 = $_POST["g1"]; if(empty($_POST["g2"])) $g2 = -1; else $g2 = $_POST["g2"]; if(empty($_POST["g3"])) $g3 = -1; else $g3 = $_POST["g3"]; if(empty($_POST["g4"])) $g4 = -1; else $g4 = $_POST["g4"]; $subject = strtoupper($_POST["subject"]); $normal = media($_POST["criteria"], $g1, $g2, $g3, $g4); query("INSERT INTO portfolio (id, subject, G1, G2, G3, G4, criteria, creditos, normal) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?) ON DUPLICATE KEY UPDATE G1 = VALUES(G1), G2 = VALUES(G2), G3 = VALUES(G3), G4 = VALUES(G4), criteria = VALUES(criteria), creditos = VALUES(creditos), normal = VALUES(normal)", $_SESSION["id"], $subject, $g1, $g2, $g3, $g4, $_POST["criteria"], $_POST["creditos"], $normal); PS: editable_elements go from 0 to 6, and include "g1,g2,g3,g4,criteria,credits" and another variable not important to this thread(but I want to send it to the php as well)
And the HTML part that can be modified is this: (remember that all the variables you see in this table were sent from another php file)
<?php $i = 0;?> <?php foreach ($rows as $row): ?> <tr class="d1"> <td><?php echo $row["subject"] ?></td> <td contenteditable = "false" id = "<?php echo 'g1'.$i; ?>"> <?php if($row["G1"] != -1) echo $row["G1"]; else echo " "; ?> </td> <td contenteditable = "false" id = "<?php echo 'g2'.$i; ?>"> <?php if($row["G2"] != -1) echo $row["G2"]; else echo " "; ?> </td> <td contenteditable = "false" id = "<?php echo 'g3'.$i; ?>"> <?php if($row["G3"] != -1) echo $row["G3"]; else echo " "; ?> </td> <td contenteditable = "false" id = "<?php echo 'g4'.$i; ?>"> <?php if($row["G4"] != -1) echo $row["G4"]; else echo " "; ?> </td> <td> <?php $round = round($row["normal"],2); echo $round; ?> </td> <td contenteditable = "false" id = "<?php echo 'creditos'.$i; ?>"><?= $row["creditos"] ?></td> <td contenteditable = "false" id = "<?php echo 'criteria'.$i; ?>"><?php echo $row["criteria"];?></td> <td><button class = "clicker" id = "<?php echo $i; ?>">Edit</button></td> </tr> <?php $i++; ?> <?php endforeach ?> 
