0

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";
}
?>

1 respuesta 1

0

Esto puedes hacerlo con javascript

 <!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">
    <title>Entradata</title>
  </head>
  <body>


<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" onclick="return getOutput();">
                 <span class="glyphicon glyphicon-log-in"></span> Registrarme
                 </button>
            </div>
            <div id="output">waiting for action</div>

        </form>
            
    </div>

 </div>

</section> 

    <script>
        
function getOutput() {
     getRequest(
         'script.php', // URL del archivo PHP que quieres usar
          drawOutput,  // Maneja la salida exitosa
          drawError    // maneja los errores
     );
     return false;
}  

function drawError() {
       var container = document.getElementById('output');
       container.innerHTML = 'Ups: algo salio mal!';
}

function drawOutput(responseText) {
       var container = document.getElementById('output');
       container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
       var req = false;
       try{
           // most browsers
           req = new XMLHttpRequest();
       } catch (e){
           // IE
           try{
               req = new ActiveXObject("Msxml2.XMLHTTP");
           } catch(e) {
               // try an older version
               try{
                   req = new ActiveXObject("Microsoft.XMLHTTP");
               } catch(e) {
                   return false;
               }
           }
       }
       if (!req) return false;
       if (typeof success != 'function') success = function () {};
       if (typeof error!= 'function') error = function () {};
       req.onreadystatechange = function(){
           if(req.readyState == 4) {
               return req.status === 200 ? 
                   success(req.responseText) : error(req.status);
           }
       }
       req.open("GET", url, true);
       req.send(null);
       return req;
}
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.