How to use jQuery AJAX with PHP to submit a form into a mySQL database with using an <a> tag?

Question

What I am trying to do is create a "save" button for my website which saves specific posts and comments, exactly like the "save" button on Reddit. For now I am trying to self teach jQuery AJAX and attempting to figure out how to submit data to the database without having to reload the whole page. What I am attempting to do here is save a string by submitting it to a table called "Saved" when I click on "save".

HTML

<div id="message1">
        <div id="pmessage"><p><?php echo $myComment;?></p></div>
        <a href="#" class="Save" style="color: blue;">Save</a>
        <a href="#" class="Edit" style="color: blue;">Edit</a>
        <a href="#" class="Hide" style="color: blue;">Hide</a>     
    </div>  
    <form action="ajaxexample.php" method="post" style="display: none" id="1234">
        <input type="hidden" name="message" id="message" value="<?php echo $myComment; ?>">
    </form> 

jQuery

$('a.Save').click(function () {
        if ($(this).text() == "Save") {
            $("#1234").ajax({ url: 'ajaxexample.php', type: 'post', data: 'message' });
            $("a.Save").text("Unsave");
        } else {
            $("a.Save").text("Save");
        }
    });

PHP5.3

$message = $_POST['message'];

$query = "INSERT INTO saved (comment) VALUES (?)";
$statement = $databaseConnection->prepare($query);
$statement->bind_param('s', $message);
$statement->execute();
$statement->store_result();

$submissionWasSuccessful = $statement->affected_rows == 1 ? true : false;
if ($submissionWasSuccessful)
{
    header ("Location: index.php");
}

$myComment = "This is my message!";

As of now all I am trying to do is submit the message "This is my message!" into the database table "Saved". What is wrong with my code? Why can I not submit the data to the table and how can I fix it? Thanks in advance!

Answer 1

Submit form when someone clicks on a.Save

$('a.Save').click(function (e) {
             e.preventDefault();
             $("#1234").submit();
});

submit handler on form#1234

$("#1234").submit(function(e) {
    e.preventDefault();
    $.ajax({
           type: "POST",
           url: 'ajaxexample.php',
           data: $("#1234").serialize(),
           success: function(data)
           {
               // data stores the response from ajaxexample.php
               // Change the html of save by using $("a.Save").html("Unsave");

           }
         });

});

Serialize automatically makes a query string.

Answer 2

$(".save").bind("click",function(e){e.preventDefault(); 
$.ajax({
    url : $("#1234").attr("action"),
    type : "POST",
    data :   $("#1234").serialize(),
    success : function(data){},
    fail : function(data){},
});
});