In this example we will show you how to insert data into Mysql using VueJs with PHP. We will submit form with the help of vuejs and insert data into Mysql with PHP api. Below are the steps to implement this , you need to simply follow below steps.
Step 1 : Create HTML File And Add Below Code.
<html lang="en">
<head>
<title>Insert Data Into Mysql Using VueJs With PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="container">
<h4 class="text-success">Insert Data Into Mysql Using VueJs With PHP</h4>
<div class="panel panel-primary">
<div class="panel-heading">Insert Data Into Mysql Using VueJs With PHP</div>
<form class="form-horizontal">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-2">First name:</label>
<div class="col-sm-5">
<input class="form-control" type="text" name="name" v-model="name" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-5">
<input class="form-control" type="email" name="email" v-model="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Mobno:</label>
<div class="col-sm-5">
<input class="form-control" type="email" name="phone" v-model="phone">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"> </label>
<div class="col-sm-5">
<button @click='submitForm();' class="btn btn-primary" name="submit" type="button">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Step 2 : Add VueJs code in above HTML file.
<script>
const app = new Vue({
el: '#app',
data: {
name: '',
email: '',
phone: ''
},
methods:{
submitForm: function(){
if(this.name != '' && this.email!='' && this.phone!=''){
axios.post('response.php', {
request: 2,
name: this.name,
email:this.email,
phone:this.phone
})
.then(function (response) {
console.log(response);
if(response.data[0].status==1){
alert('Data saved successfully');
}
})
.catch(function (error) {
console.log(error);
});
}else{
alert('Please enter all fileds');
}
}
}
})
</script>
</body>
</html>
Step 3 : Create response.php FIle.
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
$mysqli = new mysqli($hostName, $username, $password, $dbname);
$data = json_decode(file_get_contents("php://input"));
$request = $data->request;
if($request == 2){
$name = $data->name;
$email = $data->email;
$phone = $data->phone;
$insert = "INSERT INTO `user` (`name`, `email`, `mobileno`) VALUES ('".$name."','".$email."','".$phone."')";
$result = $mysqli->query($insert);
if($result){
$response[] = array('status'=>1);
}else{
$response[] = array('status'=>0);
}
echo json_encode($response);
exit;
}