5

Tengo una pantalla inicial de bienvenida con un botón que llama a un formulario modal. Cuando se despliega el formulario modal, puedo ingresar el nombre de usuario y su password, pero si en ves de presionar el botón Aceptar presiono el botón Cancelar, el formulario se cierra. Si ahora vuelvo a llamar el formulario modal, se despliega con los dos input con los datos ingresados en la vez anterior. Por favor, me pueden indicar cómo puedo limpiar estos input

$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
        $("#login").reset();
    });
})
<?php
	session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: #333;
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>

3 respuestas 3

7

Una manera simple de vaciarlos es establecer un valor vacío en los inputs.

$("#usuario, #contrasena").val("");

También puedes establecer un valor null:

$("#usuario, #contrasena").val(null);

Si además quieres que se vacíen al cancelar en vez de al cargar el modal, puedes hacerlo mediante el evento click del botón. Así no verás cargar los valores y después borrarse.

$("#cancelar").click(function(){
  $('#usuario, #contrasena').val("");
});

Snippet on show:

$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
        $("#usuario, #contrasena").val("");
    });
})
<?php
	session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: url("img/02.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>

Snippet cancelar click event:

$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
        $('#usuario').focus();
    });
    
    $("#cancelar").click(function(){
      $("#usuario, #contrasena").val("");
    });
});
<?php
	session_start();
?>
<!doctype html>
<html lang="en">
<style>
    .fondo {
        background: url("img/02.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }    
    .alto {
        height: 100vh;
    }
</style>
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; 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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <!-- <script src="https://kit.fontawesome.com/2215372ade.js" crossorigin="anonymous"></script> -->
</head>
<body>
    <!--PANTALLA INICIAL DEL SISTEMA-->
    <div class="container-fluid fondo">
        <div class="row alto align-items-center justify-content-center text-center text-ligth text-white">
            <div class="col-m-8">
                <div class="display-4">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
                <h1 class="display-4 my-3">SIGED</h1>
                <p class="lead mb-4">Sistema Integrado de Gestión Educacional</p>
                <hr class="bg-light">
                <button type="button" class="btn btn-outline-light mx-2" data-toggle="modal" data-target="#login">Ingresar</button>
            </div>
        </div>
    </div>
    <!-- MODAL LOGIN-->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal modal-dialog-centered" role="document">
            <div class="modal-content bg-dark text-light">
                <div class="modal-header">
                    <h3 class="modal-title display-6" id="exampleModalCenterTitle">Ingreso al sistema</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">                         
                        <span class="fa-layers fa-fw">
                            <i class="fas fa-circle" style="color:Tomato"></i>
                            <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-8">
                            <form id="login1">
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">Usuario</label>
                                    <input type="text" class="form-control" id="usuario">
                                </div>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">Contraseña</label>
                                    <input type="text" class="form-control" id="contrasena">
                                </div>
                                <button class="btn btn-primary mx-4">Aceptar</button>
                                <button type="button" class="btn btn-danger mx-4" data-dismiss="modal" id="cancelar">Cancelar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/logica.js"></script>
</body>
</html>

2

Una opción algo distinta es utilizar para limpiar el formulario etiquetas genéricas en lugar de ir directamente al campo en concreto en caso de que tu formulario crezca y así no tener que actualizar tu código en ese supuesto, pasándole un valor vacío del siguiente modo al input de tipo texto si que todos fueran de este tipo:

$('input[type=text').val('');

Si lo que necesitas es reestablecer todos y cada uno de los campos lo que puedes probar es, que "limpiará" todo el formulario independientemente del tipo de input de que se trate o el id/clase que le otorgues para controlar otro tipo de circunstancias:

$('form :input').val('');
2
  • 2
    ¿Puedes argumentar que tiene de diferente tu respuesta a la mía? A parte del selector que borrara todos los campos texto o todos los input del formulario cuando el esta buscando 2 concretos.
    – x3k
    Commented el 16 dic. 2019 a las 9:32
  • toda la razón que en debería desde el principio haber aclarado el porque de mi respuesta en distinción a la que tu ofrecias, que es perfectamente válida.
    – JorgeGuz
    Commented el 16 dic. 2019 a las 9:41
0

podrias hacerlo con un trigger

$(document).ready(function() {
    $('#login').on('shown.bs.modal', function() {
       $('#login1').trigger('reset');
       $('#usuario').focus();
    });
});

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.