Kallol Das Kallol Das - 2 months ago 9
PHP Question

how to insert data to mysql database with Jquery ajax and php?

I am trying to learn Ajax. I am inserting some data to mysql database from a Html Form by php. It works nicely. But my ajax part does not work. I get the success message but data dont go to my php file. My html and js code:

<!DOCTYPE html>
<html>
<head>
<title>Insertion of data with Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
</head>
<body>
<form id="myForm" method="POST" action="ajax-save.php">

Title: <input type="text" name="title" id="title"><br /><br />
Description: <textarea name="description" id="description" rows="20" cols="40"></textarea><br /><br />
Url: <input type="text" name="url" id="url"><br /><br />

<input type="submit" id="submit" name="submit" value="submit">

</form>

<script>

$(document).ready(function(){

$("#submit").click(function(){
$.ajax({
url: 'ajax-save.php',
async: true,
cache: false,
data: $('#myForm').serialize() ,
type: 'POST',
success: function(){
alert("success");
clearForm();
}
});
return false;
});

});

</script>

</body>
</html>


My php codes are working properly. I have tested it without ajax. Here is my php code.

$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('hospital');

if (isset($_POST['title'])) { $title = $_POST['title'];}
if (isset($_POST['description'])) { $description = $_POST['description'];}
if (isset($_POST['url'])) { $url = $_POST['url'];}

if(isset($_POST['submit'])){
if(mysql_query("insert into `wp_upload_video` (`id`, `title`, `description`, `url`) values (NULL, '$title', '$description', '$url')"))
echo "Successfully Inserted";
else
echo "Insertion Failed";
}


Please let me know where is my fault.

Answer

When you submit via ajax on a click of the submit button.... that condition is always true.

Checking if $_POST['submit'] is set in the PHP will always result in true because if it is not true the ajax never gets processed.

So... remove the if submit condition in the PHP and handle error notification in the ajax call.

Also, as pointed out by @NiettheDarkAbsol in comments, it's a good idea to add e.preventDefault() to the jquery as well to stop the submit button submitting the form as it normally would and allow the jquery to handle the submit (via ajax).