I have a table, some kind of to do list, where a user can click on a check icon and a value inside the database is changed. This function is working good but problem is, that with my script only the first entry in the table can be checked with AJAX, if a user checks 2nd or 3rd or 4th entry and so on, the value inside the database is changed, but the page reloads and AJAX function is not working.
Here is my code:
index.php:
if ($checktodo=="true") {
$content=array("finished"=>$localtime);
updateToDoInfo($id,$content);
}
todo.php:
<?php
// AJAX Script to submit form withouht page refresh
echo ("
<script>
$(function() {
$('#form3').on(\"submit\", function(event) {
event.preventDefault();
$.ajax({
url: 'index.php',
type: 'post',
data: $(this).serialize(),
beforeSend: function(){
$('#loading').show();
},
complete: function(){
$('#loading').hide();
},
success: function(html) {
loadTab(1);
}
});
});
});
</script>
");
// Part of todo list table
if ($todo["duedate"][$x]<$localtime) {
<tr>
<td>
<form name='form3' id='form3' action='./index.php' method='post'>
<input type='hidden' name='checktodo' value='true'>
<input type='hidden' name='id' value='".$todo["id"][$x]."'>
<input type='hidden' name='pers_id' value='".$pers_id."'>
<input type='hidden' name='sid' value='".$sid."'>
<button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
</form>
</td>
<td>
<a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a>
</td>
if ($todo["cid"][$x]!=0) {
<td>
<a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
</td>
} else {
<td></td>
}
<td>
".date("d.m.Y",$todo["duedate"][$x])."
</td>
<font color='red'>".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></font>
</td>
</tr>
} else {
<tr>
<td>
<form name='form3' id='form3' action='./index.php' method='post'>
<input type='hidden' name='checktodo' value='true'>
<input type='hidden' name='id' value='".$todo["id"][$x]."'>
<input type='hidden' name='pers_id' value='".$pers_id."'>
<input type='hidden' name='sid' value='".$sid."'>
<button class='btn btn-link btn-xs' type='submit'><i class='fa fa-check fa-2x'></i></button>
</form>
</td>
<td>
<a href='#edit-todo' onClick=\"setEditToDo('".$todo["id"][$x]."', '".$todo["descr"][$x]."')\" data-toggle='modal'><i class='fa fa-pencil-square-o fa-2x'></i></a></td>
if ($todo["cid"][$x]!=0) {
<td>
<a href='./index.php?func=editcontact&id=".$todo["cid"][$x]."&view=true&pers_id=$pers_id&sid=$sid' target='_blank'><i class='fa fa-user fa-2x'></i></a>
</td>
} else {
<td></td>
}
<td>".date("d.m.Y",$todo["duedate"][$x])."</td>";
<td>"; callText('my_calendar_019'); print " ".strtoupper($creator["lastname"][0])." ".$creator["firstname"][0].": <b>".($todo["descr"][$x])."</b></td>";
</tr>";
}
?>
So as you can see I am submitting my form (id: form3) with the js/ajax code above. As I said it is working only for the first entry inside my table, but not for all other entries. Can someone tell me what I am doing wrong?
Thanks, Chris