trying to add to database using AJAX

Question

I tried following a couple of examples on the web about adding to a mysql database using ajax but it isn't posting to the database but is executing the header at the bottom of the page.

This is the html document where you input the information

edit: Thank you for all your answers, This has now been fixed.

<!DOCTYPE HTML>
    <html>
    <head>
        <script type="text/javascript" src="message.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
    <title>Add a comment!</title>
    </head>
     <body id="bodymain">
        <a href="home.php">Home</a>
        <br>

        <div id="main">
            <?=$blog_post_history?>
            </div>
            <br>
            <br>

             <form method="post" action="addreply.php">
             <input type="hidden" name="blogid" value="<?php echo $_GET['id'] ?>">
             Author:     <input type="text" name="poster" size="60">
             <br>
             Email:       <input type="text" name="email" size"60">
             <br>
             Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>

              <input type="submit" value="send" />
    </form>
    </body>
    </html>

This is the javascript

$(function(){
    //Whenever the form submites, call this
    $("form").submit(function()) {
        //submit using ajax
        submitMessage();
        //prevent from submitting
        return false;
    }
};


var submitMessage = function (){
    if($("#content").val().length > 0 && $("author").val.length > 0)
    {
        //start ajax request
        $.post(
            "addreply.php"
            {
                content: $("#message").val(),
                author: $("#author").val(),
                email: $("email").val(),
                blogid: $("blogid").val()
            },


        );
    }
};

And this is the php page adding to database

<?php

include("connect.php"); 

    $add_comment_query = $db->prepare("
        INSERT INTO `comments`
            (`email`, `author`, `content`, `postid`)
        VALUES
            (:email, :author, :content, :postid)
    ");

    $add_message_query->execute(array(
        ':email' => $_POST['email'],
        ':author'=> $_POST['author'],
        ':content' => $_POST['content'],
        ':postid' => $_POST['blogid']
    ));

    // This calls for a '301' response code instead of '200', with a 'Location'
    // sent to tell the browser where to redirect to.
    header("Location: home.php");

?>

Can anyone see where I am going wrong. I am completely stumped.

Does it throw an error?

David Starkey
– David Starkey

2013-05-06 18:43:18 +00:00
Commented May 6, 2013 at 18:43 — David Starkey
– David Starkey, Commented May 6, 2013 at 18:43

Barmar · Accepted Answer · 2013-05-06 18:44:03Z

1

$("author") and $("#author") should be $("#poster").

Also, all your <input> elements are midding id attributes. So:

<input type="text" name="poster" size="60">

should be:

<input type="text" name="poster" id="poster" size="60">

and similarly for all the other inputs.

answered May 6, 2013 at 18:44

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Also realized i named my pdo objects two different things. Will try this real quick and update

Chris Over a year ago

Thank you very much for your help Barmar, If I could upvote you I would but i need 8 more points!

tster · Accepted Answer · 2013-05-06 18:51:02Z

Your selectors aren't correct.

Did you try debugging the javascript in your browser to see what the value of for instance $("#author") is?

The hash is the ID selector so you need the HTML for that element to have an id property:

 <input type="text" name="poster" id="poster" size="60">

All of your other fields should be modified similarly so that each element you are going to use has an ID and each jquery selector is in the format "#" Currently author, email, and blogid have wrong selectors.

Make the HTML:

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="message.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
<title>Add a comment!</title>
</head>
 <body id="bodymain">
    <a href="home.php">Home</a>
    <br>

    <div id="main">
        <?=$blog_post_history?>
        </div>
        <br>
        <br>

         <form method="post" action="addreply.php">
         <input type="hidden" id="blogid" name="blogid" value="<?php echo $_GET['id'] ?>">
         Author:     <input type="text" name="poster" id="poster" size="60">
         <br>
         Email:       <input type="text" name="email" id="email" size"60">
         <br>
         Comment: <textarea name='content' rows=10 cols=50 id='content'></textarea>

          <input type="submit" value="send" />
</form>
</body>
</html>

and your jquery:

var submitMessage = function (){
    if($("#content").val().length > 0 && $("#poster").val.length > 0)
    {
        //start ajax request
        $.post(
            "addreply.php"
            {
                content: $("#message").val(),
                author: $("#poster").val(),
                email: $("#email").val(),
                blogid: $("#blogid").val()
            },


        );
    }
};

Collectives™ on Stack Overflow

trying to add to database using AJAX

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related