Colin Colin - 3 months ago 19
PHP Question

Insert into database (mysql) using Ajax and PHP

I am trying to insert data from a form into a mysql database. The place I think the issue is, is where Im using the button in the HTML hence why I copied all of it over. Any help would be appreciated!

When I hit the submit button, the page flashes and nothing is inserted into the DB. It should display a green box saying the record has been submitted on the html page.

Because some people are more worried Im building an authentication system then whats wrong. This is NOT an authentication system, its just an example of how to insert into a mysql db.

Index.html



<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example with Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/insert.js"></script>

<style>
.custom{
margin-left:200px;
}
</style>
</head>
<body>

<div class="container">
<h2 class="text-center">Insert Data Using Ajax</h2>

<br/>
<p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p>
<br/>
<hr/>
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" type="text" placeholder="Enter you name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" id="email" type="text" placeholder="Your Email...">
</div>
</div>
<fieldset >
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" id="password" type="text" placeholder="Your Password...">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>







insert.php



<?php
//Create connection
$connection = mysqli_connect('localhost','username','passwd','dbName');

if($_REQUEST['name']){
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$password= $_REQUEST['password'];
$gender = $_REQUEST['gender'];

$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";

$query = mysqli_query($connection,$q);
if($query){
echo ' Data Inserted Successfully'
mysql_close($connection);
}
}
?>





js/insert.js



$(document).ready(function(e) {
$('#submit').click(function(){
var name = $('#name').val();
var email = $('#email').val();
var password = $('#password').val();
var gender = $('#gender').val();

$ajax({
type:'POST',
data:{name:name,email:email,password:password,gender:gender},
url:"insert.php", //php page URL where we post this data to save in databse
success: function(result){

$('#alert').show();

$('#show').html(result);


}
})
});
});




Answer

Anyway, this particular code works out to allowing insertion into database, though there are still some problem somewhere which I cannot find out.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example with Ajax</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(function () {
        $('button').click(function () {
          var name2 = $('#name').val();
          var email2 = $('#email').val();
          var password2 = $('#password').val();
          var gender2 = $('#gender').val();
          console.log('starting ajax');
          $.ajax({
            url: "./insert.php",
            type: "post",
            data: { name: name2, email: email2, password: password2, gender: gender2 },
            success: function (data) {
              var dataParsed = JSON.parse(data);
              console.log(dataParsed);
            }
          });

        });
      });

    </script>

    <style>
      .custom{
         margin-left:200px;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <h2 class="text-center">Insert Data Using Ajax</h2>

      <form class="form-horizontal" >
        <div class="form-group">
          <label class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
          </div>
        </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
              <input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
            </div>
          </div>
          <div class="form-group">
            <label for="gender" class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
              <select id="gender" class="form-control">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Submit</button>
            </div>
          </div>
      </form>
    </div>
  </body>
</html>

insert.php

<?php

    //Create connection
  $connection = mysqli_connect('localhost', 'root', '', 'dbase');
    if($_POST['name']){
      $name = $_POST['name'];
      $email = $_POST['email'];
      $password= $_POST['password'];
      $gender = $_POST['gender'];

      $q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";

      $query = mysqli_query($connection, $q);

      if($query){
          echo json_encode("Data Inserted Successfully");
          }
      else {
          echo json_encode('problem');
          }
      }

?>
Comments