Not able to store data in mysql using ajax

Question

I am trying to save my form details in a database using PHP and Ajax. It includes text fields and image. My data is not getting saved in mysql. If I am trying to save data without ajax, it works perfectly. So please help me out in my code.

This is how I am saving my details in database:


// Create database connection
$db = mysqli_connect("localhost:8889","root","123","temp") or die("could not connect to server");

// If upload button is clicked ...

  $finame=$_POST['firstname'];
  $laname=$_POST['lastname'];
  $image_text = $_POST['image_text'];
  $template = $_POST['template'];
  $address = $_POST['address'];
  $email = $_POST['email'];
  $experience = $_POST['experience'];

   // Get image name
   $image = $_FILES['image']['name'];
   $directory = date("Y").'/'.date("m").'/'.date("d").'/';
  //If the directory doesn't already exists.
  if(!is_dir($directory)){
      //Create our directory.
      mkdir($directory, 755, true);
  }
   // image file directory
   $target = $directory.basename($image);

   $sql = "UPDATE person SET fname='$finame', sname='$laname', image='$image', about='$image_text', template='$template', address='$address', email='$email', experience='$experience'  where id=1";
   // execute query
   mysqli_query($db, $sql);
 ?>

Here is my table in mysql:

CREATE TABLE `person` (
  `fname` varchar(30) DEFAULT NULL,
  `sname` varchar(30) DEFAULT NULL,
  `image` mediumblob NOT NULL,
  `about` varchar(10000) NOT NULL,
  `id` int(10) NOT NULL,
  `template` int(10) NOT NULL,
  `address` varchar(300) NOT NULL,
  `email` varchar(100) NOT NULL,
  `experience` varchar(1000) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

And this is my form and script:

<form enctype="multipart/form-data" id="frmBox" method="post">
<input type="text" name="firstname" id="fname" placeholder="First Name">
<input type="text" name="lastname" id="lname" placeholder="Last Name">
<input type="text" name="address" placeholder="Your address..." id="address">
<input type="file" name="image" id="image">
<textarea id="text" cols="30" rows="4" name="image_text" placeholder="Say something"></textarea></div>
<input type="radio" value="1" name="template" style="margin-left: 15px;">&nbsp; Template 1 &nbsp; &nbsp; 
<input type="radio" value="2" name="template">&nbsp; Template 2
<input type="text" name="email" placeholder="Your Email" id="email">
<textarea id="experience" cols="30" rows="4" name="experience" placeholder="Say something..."></textarea>
<h3 id="success"></h3>
<input type="submit" name="upload" class="sub-btn" value="submit">
</form>

<script type="text/javascript">
      $('document').ready(function(){
        $('#frmBox').submit(function(){
          $.ajax({
            type: 'POST',
            url: 'insert.php',
            data: $('#frmBox').serialize(),
            success: function(response){
              alert(response);
            }
          });
        });

          // var form = document.getElementById('frmBox').reset();

        });
</script>

you might find that using a `FormData` object is the way forward - https://stackoverflow.com/questions/44283986/how-to-upload-image-through-jquery might help — Professor Abronsius, May 18 '19 at 07:30
You won't be able to send a file thru ajax without proper handling, @RamRaider has a good solution to it, if you want to try out saving your data first, comment out the file input in the form and also the variables in PHP. — Alberto Vidales, May 18 '19 at 08:04

score 1 · Accepted Answer · answered May 18 '19 at 09:04

You have to use preventDefault inside your script to prevent the form being submitted. Then you will be able to pass the data to your php script except the image. You can use FormData for that purpose. Here is the script:

<script type="text/javascript">
    $('document').ready(function(){
        $('#frmBox').submit(function(e){
            e.preventDefault();
            var formData = new FormData(this);
            $.ajax({
                type: 'POST',
                url: 'insert.php',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    alert(response);
                }
            });
        });
    });
</script>

Not able to store data in mysql using ajax

1 Answers1