CODEWITHSUNDEEP
phpjqueryhtmlmysqlajax
peekaboo
peekaboo

Reputation: 105

Can't add content to mysql via jquery ajax

Hi there am a beginner in php and ajax, was trying to create a simple admin page which only submit a message and the message get stored in a mysql database. (via ajax ) however it seems that the no data is being parse through when I hit the submit button(I coded it so that when the submit button is pressed, the message would be send without the page refreshing).

Could someone check to see where my error could be? thank you

admin.php

<!DOCTYPE html>
<html>
<head> <!--inseart script here -->
    <script type= "text/javascript" src="js/jquery.js"></script> 
</head>

<body>
    Message: <input type="text" name="message" id= "message_form"><br>      


    <input type="submit" id= "submit_form" onclick = "submit_msg()">


    <script type= "text/javascript" src="js/func_submit_msg.js">     </script> 
</body>

</html>

I have created a separate function file called func_submit_msg.js

//this is a function file to submit message to database

$(document).ready(function submit_msg(){
alert('worked');
$.ajax({
    type: "POST",
    url: "submit_data.php"
    data: { message: message_form},
})
}

a connect.php file is created to connect to mysql database

<?php

        $host = "localhost";
        $user = "root";
        $pass = ""; // phpMyAdmin mysql password is blank ? i believe

        $database_name = "test"; //
        $table_name = "test_table_1";  //table that will be accessing

        //connect to mysql database
        $db = new mysqli($host, $user, $pass, $database_name); 

        //check connection? 
        if ($db -> connect_error) {
            die("error mysql database not connected: " . $db -> connect_error);
        }
        else {
            echo "connected successfully" ; 
        }

?>

a submit_data.php file is created to submit to database

<?php
include "connect.php";

$insert_data=$db-> query ("INSERT INTO test_table_1(message) VALUES ('$message_form')");


if ($db->query($insert_data === TRUE) ){
    echo "New record created successfully";
} else {
    echo "Error: " . $insert_data . "<br>" . $cdb->error;
}

$db->close();

?>

error checking code to check whether database was inserted correctly doesn't even echo out whether it is successful or not.

Updated

submit_data.php as per @ Maximus2012 suggestion

<?php
include "connect.php";

$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ($_POST['message_form'])");


if ($insert_data === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $insert_data . "<br>" . $cdb->error;
}

$db->close();

?>

No error display but there isn't any data being recorded in the database still.

Upvotes: 0

Views: 1584

Answers (1)

Michael Doye
Michael Doye

Reputation: 8171

You should start by adding your success callback to your Ajax: (if you havent already)

$(document).ready(function(){

  $('#submit_form').on('click', function(e){
    e.preventDefault();
    message_form = $('#message_form').val();

    $.ajax({
        type: "POST",
        url: "submit_data.php",
        data: {message: message_form},
            success: function(data) {
              $('#result').html(data);
            },
            error:function(err){
               //handle your error
               alert('did not work');
            }
    });
  });
});
  • Here we use .on() as the preferred method of attaching an event handler function
  • We then use .val() to get the value of the message input field and store it in a variable to be used for POSTing to the submit_data.php script
  • e.preventDefault() is used so that the default event is cancelled when click the submit button

In your html, add an element that the result can be returned to: (#result)

<html>
<head> 
    <script type= "text/javascript" src="js/jquery.js"></script>
    <script type= "text/javascript" src="js/func_submit_msg.js"></script>
</head>
<body>
    <form action="" method="POST">
    Message: <input type="text" name="message" id="message_form"><br>      

    <input type="submit" id="submit_form">
    </form>
    <div id="result"></div>

</body>
</html>
  • Here we wrap your input in a form with the method and action properties to ensure that the name attributes are able to be used in POST requests

In your PHP (submit_data.php) you need to assign a value to $message_form before using it:

<?php
include "connect.php";

$message_form = $_POST['message'];

$insert_data=$db->query("INSERT INTO test_table_1(message) VALUES ('$message_form')");


if ($insert_data === TRUE ){
    echo "New record created successfully";
} else {
    echo "Error: " . $insert_data . "<br>" . $cdb->error;
  }

$db->close();
?>

If all goes well, you should get some kind of result from this.

Upvotes: 1

Related Questions