jQuery - Ajax POST似乎不起作用

Question

Here is my HTML Code:

<div class="form-horizontal row-border">
        <div class="form-group">
            <label class="col-md-2 control-label">Title:</label>
            <div class="col-md-10"><input class="form-control" id="title" name="title" type="text"></div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Article:</label>
            <div class="col-md-10">
                <textarea name="editor1" id="editor" rows="10" cols="80">
                                Let's go...
                            </textarea>     
            </div>
        </div>                                  
        <div class="form-group">
            <label class="col-md-2 control-label">Tags:</label>
            <div class="col-md-10"><input class="tags" id="tags" type="text" value="">
            </div>
        </div>
        <div class="row" style="margin-left:92%;">
        <input type="button" id="PostArticle" class="btn btn-success" value="Post Article"></input>
        </div>
</div>

Here is my JavaScript code:

<script type="text/javascript">     
        $("#PostArticle").click(function() {                    
            var title = $("#title").val();
            var text = $("#editor").text();
            var tags = $("#tags").val();

                $.ajax({
                    url: 'post_new_article.php',
                    type: 'POST',
                    data: {
                        title: title,
                        tags: tags,
                        text: text
                    },
                    dataType: 'json',
                    success: function (data) {                                  
                        noty({text: 'MySite.com:' + data.title + ' was successfully created!', type: 'success'});

                    },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                        noty({text: 'Failure - The article was not created! Error is: ' + errorThrown + '', type: 'error'});
                      }
                });

        }); 
</script>

Here is the code from: post_new_article.php:

<?php

require "include/config.php";
require "include/functions.php";

ConnectWithMySQLDatabase();

error_reporting(E_ALL);
ini_set('display_errors', '1');

$title = $_POST['title'];
$text = $_POST['text'];
$tags = $_POST['tags'];
$month = date('F');
$year = date('Y');
$day = date('d');

if(isset($_POST['title']))  
{
    mysql_query("INSERT INTO `Blog` (`id`, `Title`, `Article`, `Autor`, `Date`, `Month`,`Year`, `Tags`, `Image`) VALUES ('', '$title', '$text', 'Venelin Vasilev', '$day','$month', '$year', '$tags', '')");
}

$result['title'][0] = $title;

echo json_encode($result);

From all things it seems that only the MySQL insert function is not working. I can confirm that ConnectWithMySQLDatabase(); function is working as intended and this function is establishing the connection to MySQL.

Somehow it seems i can not insert the mysql query after i hit the Post Article button. I can confirm that i receive response from post_new_article.php because i receive a notification with the title of the article as a back response. So the json seems to read back the title of the article.

So can you help me out resolve this problem and make it insert the query to the MySQL database ?

Thanks in advance!

Answer 1

Try this

in your form submit button should be

<input type="submit" id="submit" class="btn btn-success" value="Post Article"></input>

And AJAX Should be

<script>
  $(function(){
      $( "#submit" ).click(function(event)
      {
         event.preventDefault();

        var title = $("#title").val();
         var text = $("#editor").text();
         var tags = $("#tags").val();


         $.ajax(
             {
               type:"post",
               dataType: 'json',
               url: "./post_new_article.php",
               data:{ title:title, text:text,tags:tags},
               success:function(data)
               {

               }
            });
      });
  });
</script>

EDIT 01

Change this

mysql_query("INSERT INTO Blog (id, Title, Article, Autor, Date, Month,Year, Tags, Image) VALUES ('', '$title', '$text', 'Venelin Vasilev', '$day','$month', '$year', '$tags', '')");