Ajax form submission

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\">
                                      <a href=\"#\" class=\"message-img\"><img class=\"avatar\" src=\"img/chat-avatar.jpg\" alt=\"\"></a>
                                      <div class=\"message-body msg-in\">
                                          <span class=\"arrow\"></span>
                                          <div class=\"text\">
                                              <p class=\"attribution\"><a href=\"#\">$taskOwner</a></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

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 2

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 3

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 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
});