php - How to show popup on same page after data submission -

i have html form

<form class="form" method="post" action="data.php">  					<div class="form-group">  						<input class="form-control input-lg" type="text" placeholder="full name" name="name" id="name" required="">  					</div>  					<div class="form-group">  						<input class="form-control input-lg" type="tel" placeholder="phone number" name="phone" id="phone" required="">  					</div>  					<div class="form-group">  						<input class="form-control input-lg" type="email" placeholder="email id" name="email" id="email" required="">  					</div>  					<div class="form-group">  						<!--<input class="form-control input-lg option" type="date" name="date" value="date" id="date" required="">-->  						<input type="text" class="form-control input-lg option" name="date" placeholder="date" id="datepicker">  					</div>  					<div class="form-group">  						<select class="form-control input-lg option" name="time" id="time" style="padding-left: 10px;color:darkgray;">  						  <option>time slot</option>  						  <option>10:00-11:00</option>  						  <option>11:00-12:00</option>  						  <option>12:00-13:00</option>  						  <option>13:00-14:00</option>  						 </select>  					</div>  					<input class="btn btn-success btn-lg" style="margin-left: 30%; margin-top:10px; padding: 5px 16px;" type="submit" value="book ">

here code of data.php

<?php   error_reporting(e_all);  ini_set('display_errors', 1);    $servername = "localhost";  $username = "root";  $password = "xxxx";  $dbname = "xxxxxxxxxx";    // create connection  $conn = new mysqli($servername, $username, $password, $dbname);    // check connection  if ($conn->connect_error) {      die("connection failed: " . $conn->connect_error);  }   $sql = "insert data (name,phone,email,date,time)  values ('$_post[name]', '$_post[phone]', '$_post[email]',  '$_post[date]', '$_post[time]')";  if (mysqli_query($conn, $sql)) {      echo  "<script type='text/javascript'>alert('submitted successfully!')</script>";  }   else {      echo "error: " . $sql . "<br>" . mysqli_error($conn);  }    mysqli_close($conn);      ?>

this code shows pop on same window ugly format , after click on ok shows blank page ..../data.php url. want redirect on same page.

and can change popup style. want show popup in mid of page.

please solve these issues.. newbie

you cannot change location of alert-popup. need open popup via window.open. use below updated code redirect required page.

<?php  error_reporting(e_all); ini_set('display_errors', 1);  $servername = "localhost"; $username = "root"; $password = "xxxx"; $dbname = "xxxxxxxxxx";  // create connection $conn = new mysqli($servername, $username, $password, $dbname);  // check connection if ($conn->connect_error) {     die("connection failed: " . $conn->connect_error); }  $sql = "insert data (name,phone,email,date,time) values ('$_post[name]', '$_post[phone]', '$_post[email]',  '$_post[date]', '$_post[time]')"; if (mysqli_query($conn, $sql))  {     header('location:index.php?success=1'); }  else {     echo "error: " . $sql . "<br>" . mysqli_error($conn); }  mysqli_close($conn);   ?> 

replace yourpage.php in header function actual name of page. rename index.html index.php , make these changes index file.

<?php $get = (isset($_get['success'])) ? $_get['success'] : ''; if((!empty($get)) && ($get == 1)) {     echo  "<script type='text/javascript'>alert('submitted successfully!')</script>"; } ?>  <form class="form" method="post" action="data.php">                     <div class="form-group">                         <input class="form-control input-lg" type="text" placeholder="full name" name="name" id="name" required="">                     </div>                     <div class="form-group">                         <input class="form-control input-lg" type="tel" placeholder="phone number" name="phone" id="phone" required="">                     </div>                     <div class="form-group">                         <input class="form-control input-lg" type="email" placeholder="email id" name="email" id="email" required="">                     </div>                     <div class="form-group">                         <!--<input class="form-control input-lg option" type="date" name="date" value="date" id="date" required="">-->                         <input type="text" class="form-control input-lg option" name="date" placeholder="date" id="datepicker">                     </div>                     <div class="form-group">                         <select class="form-control input-lg option" name="time" id="time" style="padding-left: 10px;color:darkgray;">                           <option>time slot</option>                           <option>10:00-11:00</option>                           <option>11:00-12:00</option>                           <option>12:00-13:00</option>                           <option>13:00-14:00</option>                          </select>                     </div>                     <input class="btn btn-success btn-lg" style="margin-left: 30%; margin-top:10px; padding: 5px 16px;" type="submit" value="book "> 

i have modified data.php file again, sure use updated code.