How can i submit this form like this tutorial? - php

Question

I have seen this tutorial and tried Form submit with ajax without refresh
It was working fine when i had the php code in my index.php. But now when i added the js and copied the php code in reply.php . it's not working.
I am not even sure does the php works in same way with ajax or not .
someone please help me to submit this form in database .
index.php
begin snippet: js hide: false console: true babel: false -->
<div id="comment-box">
<div class="form-group">
<form method="post" id="reply" enctype="multipart/form-data" style="width: 85%;" >
<div class="input-group">
<input type="file" name="image2" class="file" id="imgInp"/>
<span class="input-group-btn">
<button class="browse btn btn-primary input-md" type="button" ><i class="glyphicon glyphicon-picture"></i>I</button>
</span>
<input type="text" placeholder="say something" class="form-control" name="comment"/><br/>
<span class="input-group-btn">
<button class="btn btn-info" >submit</button>
</span>
</div>
<div>
<img id="blah" src="/final/images/blank.jpg" style=" width:7%; float:left; " />
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
// submit form using $.ajax() method
$('#reply').submit(function(e){
e.preventDefault(); // Prevent Default Submission
$.ajax({
url: 'reply.php',
type: 'POST',
data: $(this).serialize() // it will serialize the form data
})
.done(function(data){
$('#fcomment-box').fadeOut('slow', function(){
$('#comment-box').fadeIn('slow').html(data);
});
})
.fail(function(){
alert('Ajax Submit Failed ...');
});
});
});
</script>
</div>
and here is php reply.php:
[note: this was working fine when it was in the same index.php. i just copied the whole php code in reply.php]
<?php
// these php variables are from index.php . will this work now like these are included ??
$user =$_SESSION['user_email'];
$get_user = "select * from users where user_email='$user' ";
$run_user = mysqli_query($con,$get_user);
$row = mysqli_fetch_array($run_user);
$user_id2 = $row['id'];
$user_name2 = $row['user_name'];
if( $_POST ){
global $con;
global $user_id2;
$comment = $_POST['comment'];
$post_image2 = $_FILES['image2']['name'];
$image_tmp2 = $_FILES['image2']['tmp_name'];
$fileType = $_FILES["image2"]["type"];
$fileSize = $_FILES["image2"]["size"];
$fileErrorMsg = $_FILES["image2"]["error"]; // 0 for false... and 1 for true
$kaboom = explode(".", $post_image2); // Split file name into an array using the dot
$fileExt = end($kaboom); // Now target the last array element to get the file extension
$post_image2 = preg_replace('#[^a-z.0-9]#i', '', $post_image2);
$post_image2 = time().rand().".".$fileExt;
date_default_timezone_set("America/New_York");
$date = date('Y-m-d H:i:s');
if ( $_FILES['image2']['name']=='') {
$insert =" insert into comments (post_id,user_id,comment,author_name,date) values('$post_slug','$user_id2','$comment','$user_name2','$date' ) ";
$run = mysqli_query($con,$insert);
}
else if($fileSize > 1048576) { // if file size is larger than 5 Megabytes
echo "ERROR: Your file was larger than 1 Megabytes in size.";
// Remove the uploaded file from the PHP temp folder
} else if ($fileErrorMsg == 1) { // if file upload error key is equal to 1
echo "ERROR: An error occured while processing the file. Try again.";
}
else if (preg_match("/.(gif)$/i", $post_image2) ) {
// This condition is only if you wish to allow uploading of specific file types
$post_image2 = 'resized_'.$post_image2 ;
move_uploaded_file($image_tmp2,"images/$post_image2");
$insert =" insert into comments (post_id,post_image,user_id,comment,author_name,date) values('$post_slug','$post_image2','$user_id2','$comment','$user_name2','$date' ) ";
$run = mysqli_query($con,$insert);
}
else{
if (!preg_match("/.(gif|jpg|png)$/i", $post_image2) ) {
// This condition is only if you wish to allow uploading of specific file types
echo "ERROR: Your image was not .gif, .jpg, or .png.";
// Remove the uploaded file from the PHP temp folder
}
else{
move_uploaded_file($image_tmp2,"images/$post_image2");
// ---------- Include Universal Image Resizing Function --------
include_once("2ak_php_img_lib_1.0.php");
$target_file = "images/$post_image2";
$resized_file = "images/resized_$post_image2";
$wmax = 260;
$hmax = 380;
ak_img_resize($target_file, $resized_file, $wmax, $hmax, $fileExt);
// ----------- End Universal Image Resizing Function -----------
$insert =" insert into comments (post_id,post_image,user_id,comment,author_name,date) values('$post_slug','$post_image2','$user_id2','$comment','$user_name2','$date' ) ";
$run = mysqli_query($con,$insert);
}
}
}
?>

Answer 1

$(document).on("submit", "#reply", function(e){
e.preventDefault();
var fd = new FormData();
var file = $("#imgInp")[0];
fd.append("image2", file.files[0]);
fd.append("comment", $(this).find('input[name="comment"]').val());
$.ajax({
url: 'reply.php',
type: 'POST',
data: fd,
processData: false,
contentType: false,
}).done(function (data){
$('#fcomment-box').fadeOut('slow', function(){
$('#comment-box').fadeIn('slow').html(data);
});
}).fail(function(){
alert('Ajax Submit Failed ...');
});
});