CODEWITHSUNDEEP
htmlmysqlajax
Chris
Chris

Reputation: 78

trying to add to database using AJAX

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.

Upvotes: 0

Views: 235

Answers (2)

tster
tster

Reputation: 18237

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()
            },


        );
    }
};

Upvotes: 0

Barmar
Barmar

Reputation: 780869

$("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.

Upvotes: 1

Related Questions