CODEWITHSUNDEEP
phphtmlmysqlajax
ANMOL JAIN
ANMOL JAIN

Reputation: 43

Not able to store data in mysql using ajax

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>

Upvotes: 1

Views: 278

Answers (1)

Nipun
Nipun

Reputation: 1092

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>

Upvotes: 1

Related Questions