AJAX未提交FOM

Question

I am working with a script wherein I should be able to submit a form without page reload with the help of AJAX. The problem is that the form is not submitted to the database. Any help would be appreciated. I had messed with the codes but nothing works for me.

Here is the javascript code:

<script type="text/javascript">
    setInterval(function() {
        $('#frame').load('chatitems.php');
    }, 1);
    $(function() {
        $(".submit_button").click(function() {
            var textcontent = $("#content").val();
            var usercontent = $("#username").val();
            var namecontent = $("#nickname").val();
            var dataString = 'content=' + textcontent;
            var userString = 'content=' + usercontent;
            var nameString = 'content=' + namecontent;

            if (textcontent == '') {
                alert("Enter some text..");
                $("#content").focus();
            } else {
                $("#flash").show();
                $("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
                $.ajax({
                    type: "POST",
                    url: "chatitems.php",
                    data: {
                        dataString,
                        userString,
                        nameString
                    },
                    cache: true,
                    success: function(html) {
                        $("#show").after(html);
                        document.getElementById('content').value = '';
                        $("#flash").hide();
                        $("#frame").focus();
                    }
                });
            }
            return false;
        });
    });
</script>

this is my form:

<form action="" method="post" name="form">
    <input type="hidden" class="form-control" id="username" name="username" value="<?php echo $username; ?>" readOnly />
    <input type="hidden" class="form-control" id="nickname" name="nickname" value="<?php echo $nickname; ?>" readOnly />
    <input type="hidden" class="form-control" id="chat_role" name="chat_role" value="<?php echo $pm_chat; ?>" readOnly />
    <input type="hidden" class="form-control" id="team" name="team" value="<?php echo $manager; ?>'s Team" readOnly />
    <input type="hidden" class="form-control" id="avatar" name="avatar" value="<?php echo $avatar; ?>" readOnly />
    <div class="input-group">
        <input type="text" class="form-control" id="content" name="content" />
        <span class="input-group-btn">
            <input type="submit" name="submit" class="submit_button btn btn-primary" value="Post"></input> 
        </span>
    </div>
</form>

and finally, this is my PHP code:

<?php
include('db.php');
$check = mysql_query("SELECT * FROM chat order by date desc");
if(isset($_POST['content']))
{
    $content=mysql_real_escape_string($_POST['content']);
    $nickname=mysql_real_escape_string($_POST['nickname']);
    $username=mysql_real_escape_string($_POST['username']);
    $ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']);
    mysql_query("insert into chat(message,ip,username,nickname) values ('$content','$ip','$username','$nickname')");
}

$req = mysql_query('select * from chat ORDER BY date desc');
while($dnn = mysql_fetch_array($req))
{
    ?>
    <div class="showbox">
    <p><?php echo $dnn['username']; ?> (<?php echo $dnn['ip']; ?>): <?php echo $dnn['message']; ?></p>
    </div>
    <?php
}
?>

I know there is something wrong with my code somewhere but had spent few days already but no avail. Im hoping that someone would help.

UPDATE The form is being submitted successfully with this code only data: dataString but when I added the nameString and the userString thats when everything doesnt work as it should. I tried messing around that code but still got nothing.

Answer 1

To find out what is wrong with this you need to establish that:

a) The click event is firing, which you could test by adding a console.log('something'); at the top of that function.

b) The AJAX function is working somewhat correctly, which again you could check by adding a console.log() in the success callback of the AJAX request. You can also check console for errors, e.g if the chatitems.php is 404'ing

c) That all the data you're collecting from the DOM e.g var textcontent = $("#content").val(); contains what you're expecting it to. Again console.log().

d) That the page you're calling is successfully processing the data you're sending across, so die() a print_r() of the $_POST values to check the data it's receiving is in the format your expecting. You also need to add some error handling to your mysql code: https://secure.php.net/manual/en/function.mysql-error.php (or better yet use PDO or MySQLi https://secure.php.net/manual/en/book.pdo.php), which will tell you if there's something wrong with your MySQL code. You can check the return of you're AJAX call (which would include any errors) by console.log(html) in your success callback.

Information you gather from the above will lead you to your bug.