Ajax form submission - php

Question

I am trying to post the a form using ajax but the form never submits. Debugging using firebug doesn't show any errors. any help is appreciated. i am new to PHP and coding.
Taskload.php - Pushes data to the main page:
<?php
include_once 'dbconnect.php';
$varacctname = $_REQUEST['acct'];
$varViewtasks = mysql_query("SELECT * FROM tasks WHERE taskresource = '$varacctname' AND taskstatus='Active'");
while ($rows = mysql_fetch_array($varViewtasks)) {
$accttask = $rows['tasktitle'];
$acctTaskStatus = $rows['taskstatus'];
$taskOwner = $rows['taskOwnerFullName'];
$taskid = $rows['taskid'];
echo "<div class=\"timeline-messages\">
<div class=\"msg-time-chat\">
<img class=\"avatar\" src=\"img/chat-avatar.jpg\" alt=\"\">
<div class=\"message-body msg-in\">
<span class=\"arrow\"></span>
<div class=\"text\">
<p class=\"attribution\">$taskOwner</p>
<p> $accttask</p>
</div>
<form id=\"completetaskform\" method=\"post\" >
<input type=\"hidden\" name=\"taskid\" value=\"$taskid\" />
<input type=\"hidden\" name=\"acct\" value=\"$varacctname\" />
<input type=\"submit\" id=\"completetaskbtn\" class=\"btn btn-success\" />
</form>
</div>
</div>
</div>";
}
?>
Tasks.js - where the script lives
$("#completetaskform").submit(function(){
$.ajax ({
type:"POST",
url:"functions//completeTask.php",
data: $('form#completetaskform').serialize(),
success: function(msg){
notifyTaskCompleted();
location.reload();
},
});
return false;
});
completeTask.php Where the php code runs to mark task as completed.
<?php
include 'dbconnect.php';
$acct = $_POST['acct'];
$taskid = $_POST['taskid'];
$complete = 'completed';
mysql_query("UPDATE tasks SET taskstatus='$complete' WHERE taskresource='$acct' AND taskid='$taskid' ");
?>
--On the main page , i have tasks.js included in - Hope this may describe the issue better.

Answer 1

try SerializeArray
$("#completetaskform").submit(function(){
$.ajax ({
type:"POST",
url:"functions//completeTask.php",
data: $('form#completetaskform').serialize(),
success: function(msg){
notifyTaskCompleted();
location.reload();
},
});
return false;
});
or even $.post
$.post('functions/completeTrask.php',$('form#completetaskform').serialize(),function(){
notifyTaskCompleted();
location.reload();
});

Answer 2

1.Change
$("#completetaskform").submit(function(){
to
$("#completetaskform").on('click',function(){
Because jquery event is ".on()", not ".submit()"
2.Change
<input type=\"submit\" id=\"#completetaskbtn\" class=\"btn btn-success\"> Complete </a>
to
<button id="completetaskbtn"> Complete </button>
Bacause you don't need real submit button.
3.I'm not sure that your url is correct but this will submit your form to php.

Answer 3

after many trials, i found that changing the the form data section to $(this).serialize worked instead of $('form#completetaskform').serialize(). Not sure why but this worked. Thank you.
$("form#completetaskform").submit(function(){
$.ajax ({
type:"POST",
url:"Functions/completeTask.php",
data: $(this).serialize(),
success: function(msg){
notifyTaskCompleted();
location.reload();
},
});
return false;
});

Answer 4

I would use a generic button and click handler instead of a submit button and the submit event. Try this:
<button type=\"button\" id=\"#completetaskbtn\" class=\"btn btn-success\"> Complete </button>
Then attach a click event to it
$("#completetaskbtn").on('click', function () {
// the rest of the code you have
});