Quiero que en mi html, al rellenar correctamente los datos para registrarte, en vez de que te envíe a otra pestaña html, quiero que me aparezca una ventana emergente en el mismo html de registro diciendo que se ha registrado correctamente.
Este sería mi html, donde aparece el formulario, pero no sé como insertar mi php al html y que aparezca esta ventana emergente, ya que, haciéndolo como lo tengo inserto los datos y una vez que los inserto, al estar todo correcto, me envía a otra pestaña donde me dice que los datos han sido introducidos correctamente, pero yo lo que quiero es que me lo diga en la misma pestaña del registro con una ventana emergente.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600&display=swap" rel="stylessheet">
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<title>Entradata</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a href=index.html><img src="imagenes/logo_entradata12.png" class="logo-brand" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<ion-icon name="menu-outline"></ion-icon>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html#introd">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#eventos">Eventos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#nosotros">Sobre nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#opinion">Opiniones</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contacto">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="registro" class="divider">
<div class="container">
<div class="signup-form-container">
<!-- form start -->
<form name="form" id="register-form" method="POST" action="rellenar.php">
<div class="form-header">
<h3 class="form-title"><i class="fa fa-user"></i> Registro <ion-icon name="pencil-outline"></ion-icon></h3>
<div class="pull-right">
<h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>
</div>
</div>
<div class="form-body">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input name="nombre" type="text" class="form-control" placeholder="Nombre y Apellidos">
</div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input name="email" type="text" class="form-control" placeholder="Email">
</div>
<span class="help-block" id="error"></span>
</div>
<div class="row">
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="usuario" id="password" type="text" class="form-control" placeholder="Nombre de Usuario">
</div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="contrasenya" type="password" class="form-control" placeholder="Contraseña">
</div>
<span class="help-block" id="error"></span>
</div>
</div>
</div>
<div class="form-footer">
<button type="submit" class="btn btn-info" name="Registrarme" value="Registrarme">
<span class="glyphicon glyphicon-log-in"></span> Registrarme
</button>
</div>
</form>
</div>
</div>
</section>
<footer class="bg-dark">
<div class="container">
<img src="imagenes/logo_entradata12.png" class="logo-brand" alt="logo">
<ul class="list-inline">
<li class="list-inline-item footer-menu"><a href="#introd">Inicio</a></li>
<li class="list-inline-item footer-menu"><a href="#eventos">Eventos</a></li>
<li class="list-inline-item footer-menu"><a href="#nosotros">Sobre nosotros</a></li>
<li class="list-inline-item footer-menu"><a href="#contacto">Contacto</a></li>
</ul>
<ul class="list-inline">
<li class="list-inline-item"><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
<li class="list-inline-item"><a href="#"><ion-icon name="logo-youtube"></ion-icon></a></li>
<li class="list-inline-item"><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li class="list-inline-item"><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li class="list-inline-item"><a href="#"><ion-icon name="logo-dribbble"></ion-icon></a></li>
</ul>
<small>©2020 All Rights Reserved. Created by <a href="https://themesbootstrap.com.mx/" class="font-weight-bold" target="_blank"
rel="noopener">Themes Bootstrap</a></small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Y mi PHP es:
<?php
// Primero comprobamos que ningún campo esté vacío y que todos los campos existan.
if(isset($_POST['nombre']) && !empty($_POST['email']) && isset($_POST['usuario']) && !empty($_POST['contrasenya'])) {
// Si entramos es que todo se ha realizado correctamente y conectamos con la base de datos club de mysql
$link = mysqli_connect("localhost","root","","entradata");
// Con esta sentencia SQL insertaremos los datos en la base de datos
mysqli_query($link,"INSERT INTO usuarios(nombre,email,usuario,contrasenya)
VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['usuario']}','{$_POST['contrasenya']}')");
// Ahora comprobaremos que todo ha ido correctamente
$my_error = mysqli_error($link);
if(!empty($my_error)) {
echo "<script>alert('Usuario ya existe .$my_error');</script>";
} else {
echo "<script>alert('El usuario ha sido introducido correctamente');</script>";
}
}
else {
echo "Error, no ha introducido todos los datos";
}
?>