website - Javascript function not defined when called on input onclick() -

i keep getting

referenceerror: del not defined.

before working refresh page, set refresh div when clicking.

while($row = $result->fetch_assoc()) {             $fileid = $row['fileid'];             echo "<tbody><tr>";             echo "                     <td bgcolor='white'>                         <input type='checkbox' checked>                     </td>                     <td bgcolor='white'>                         {$row['name']}                     </td>                     <td bgcolor='white'>                         {$row['type']}                     </td>                     <td bgcolor='white'>                         {$row['size']}                     </td>                     <td bgcolor='white'>                         {$row['created']}                     </td>                      <td>                         <input type='button' name='download' value='download' onclick='window.location=&quot;get_file.php?fileid=$fileid&quot;;'>                     </td>                     <td>                         <script type='text/javascript'>                             function del() {                                 console.log('im working!');                                 var r = confirm('do want remove file?');                                 if (r == true) {                                     $.ajax({url: 'delete.php',                                             data: {action: '<?php print $fileid;?>'}                                             type: 'post';                                             success: function() {                                                 $('#filetable').load(document.url + ' #filetable');                                             }                                     });                                 }                             }                         </script>                         <input type='button' name='delete' value='delete' onclick='del()'>                      </td> 

you're duplicating function every row, , when press button, function not know id you're after.

change like:

echo <<<eohtml                          <script type='text/javascript'>                             function del(id) {                                 console.log('im working!', id);                                 var r = confirm('do want remove file?');                                 if (r == true) {                                     $.ajax({url: 'delete.php',                                             data: {action: id.tostring()}                                             type: 'post';                                             success: function() {                                                 $('#filetable').load(document.url + ' #filetable');                                             }                                     });                                 }                             }                         </script>  eohtml;  while($row = $result->fetch_assoc()) {             $fileid = $row['fileid'];             echo <<<eohtml                 <tbody><tr>                     <td bgcolor='white'>                         <input type='checkbox' checked>                     </td>                     <td bgcolor='white'>                         {$row['name']}                     </td>                     <td bgcolor='white'>                         {$row['type']}                     </td>                     <td bgcolor='white'>                         {$row['size']}                     </td>                     <td bgcolor='white'>                         {$row['created']}                     </td>                      <td>                         <input type='button' name='download' value='download' onclick='window.location=&quot;get_file.php?fileid={$fileid}&quot;;'>                     </td>                     <td>                         <input type='button' name='delete' value='delete' onclick='del({$fileid})'>                     </td> eohtml; }