Use modal to confirm if a user is created

Navigation
0

I'm trying to get a modal window to confirm whether or not you want to register a user, I'm using php to make it add, the modal window comes out but when you click on the save button, it does not do anything , here I leave the code

This is the code of my form 

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="card col-md-6">
        <div class="card-body">
          <div class="panel panel-default">
            <div class="panel-body">
              <form method="post" id="f" action="add_user.php">
                <div class="col-md-12">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Cedula</span>
                    </div>
                    <input type="text" class="form-control" id="cedula" name="cedula" placeholder="Cedula" required onkeypress="return valida(event)" minlength="7">
                    <div id="Info"></div>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Nombre</span>
                    </div>
                    <input type="text" class="form-control" id ="full-name" name="full-name" placeholder="Nombre completo" required onkeypress="return letras(event)">
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Usuario</span>
                    </div>
                      <input type="text" class="form-control" id="username" name="username" placeholder="Nombre de usuario" required>
                      <div id="nfo"></div>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Contraseña</span>
                    </div>
                      <input type="password" class="form-control" id="password" name ="password"  placeholder="Contraseña" required minlength="8">
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Rol de Usuario</span>
                    </div>
                      <select class="form-control" id="level" name="level" required>
                        <option value="">Selecciona el tipo de usuario</option>
                        <?php foreach ($groups as $group ):?>
                         <option value="<?php echo $group['group_level'];?>"><?php echo ucwords($group['group_name']);?></option>
                      <?php endforeach;?>
                      </select>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Status Usuario</span>
                    </div>
                      <select class="form-control" id="status" name="status" required>
                        <option value="">Selecciona el status del usuario</option>
                         <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                      </select>
                  </div><!-- ./form-group -->
                  <div class="form-group clearfix" style="float: right;">
                    <button type="submit" id="ad" name="add_user" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" >Crear</button>
                  </div><!-- ./form-group -->
                </div><!-- ./col -->
              </form>
            </div><!-- ./panel-body -->
          </div><!-- ./panel default -->
        </div><!-- ./card-body -->
      </div><!-- /.card -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!--/. container-fluid -->

and this is the code of my modal 

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">¿Esta seguro de crear el usuario?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Compruebe que los datos son correctos antes de crear el usuario
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Crear Usuario</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          </div>
        </div>
      </div>
    </div>
    
asked by Mar 06.08.2018 в 03:38
source

3 answers

0

Checking your code I see that your Create User button does not have a id or class , which is important to work with JavaScript, added a class to it with the name of btnCreate and added a script that will send your form (to which I put a id="form1" ) at the time of confirmation. I hope it helps you. 

 $(".btnCrear").click(function(){
   $("form").submit();
 });
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="card col-md-6">
        <div class="card-body">
          <div class="panel panel-default">
            <div class="panel-body">
              <form method="post" id="f" action="add_user.php">
                <div class="col-md-12">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Cedula</span>
                    </div>
                    <input type="text" class="form-control" id="cedula" name="cedula" placeholder="Cedula" required onkeypress="" minlength="7">
                    <div id="Info"></div>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Nombre</span>
                    </div>
                    <input type="text" class="form-control" id ="full-name" name="full-name" placeholder="Nombre completo" required onkeypress="">
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Usuario</span>
                    </div>
                      <input type="text" class="form-control" id="username" name="username" placeholder="Nombre de usuario" required>
                      <div id="nfo"></div>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Contraseña</span>
                    </div>
                      <input type="password" class="form-control" id="password" name ="password"  placeholder="Contraseña" required minlength="8">
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Rol de Usuario</span>
                    </div>
                      <select class="form-control" id="level" name="level" required>
                        <option value="">Selecciona el tipo de usuario</option>
                        <?php foreach ($groups as $group ):?>
                         <option value="<?php echo $group['group_level'];?>"><?php echo ucwords($group['group_name']);?></option>
                      <?php endforeach;?>
                      </select>
                  </div><!-- ./form-group -->
                  <div class="input-group mb-3">
                     <div class="input-group-prepend">
                      <span class="btn btn-info">Status Usuario</span>
                    </div>
                      <select class="form-control" id="status" name="status" required>
                        <option value="">Selecciona el status del usuario</option>
                         <option value="1">Activo</option>
                        <option value="0">Inactivo</option>
                      </select>
                  </div><!-- ./form-group -->
                  <div class="form-group clearfix" style="float: right;">
                    <button type="submit" id="ad" name="add_user" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" >Crear</button>
                  </div><!-- ./form-group -->
                </div><!-- ./col -->
              </form>
            </div><!-- ./panel-body -->
          </div><!-- ./panel default -->
        </div><!-- ./card-body -->
      </div><!-- /.card -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!--/. container-fluid -->

 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">¿Esta seguro de crear el usuario?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Compruebe que los datos son correctos antes de crear el usuario
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary btnCrear">Crear Usuario</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
          </div>
        </div>
      </div>
    </div>
 
 <!--<script>--!>
 <!--Aqui entra el codigo JavaScript--!>
 <!--</script>--!>
</body>
</html>
    
answered by 06.08.2018 в 04:54
0
$("#exampleModalCenter .btn-primary").click(function(){
    $("form#f").submit();
});
    
answered by 06.08.2018 в 06:04
0

You need to add the IDs to the buttons so you can better control the events and the Button of your form 

<button type="submit" id="ad" name="add_user" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter" >Crear</button>

I recommend that the ID and the name be the same and change the type="submit" by type="button" 

$("#modalAdd").click(function() {
  $("#f").submit();
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div class="card col-md-6">
        <div class="card-body">
          <div class="panel panel-default">
            <div class="panel-body">
              <form method="post" id="f" action="add_user.php">
                <div class="col-md-12">
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Cedula</span>
                    </div>
                    <input type="text" class="form-control" id="cedula" name="cedula" placeholder="Cedula" required onkeypress="return valida(event)" minlength="7">
                    <div id="Info"></div>
                  </div>
                  <!-- ./form-group -->
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Nombre</span>
                    </div>
                    <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Nombre completo" required onkeypress="return letras(event)">
                  </div>
                  <!-- ./form-group -->
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Usuario</span>
                    </div>
                    <input type="text" class="form-control" id="username" name="username" placeholder="Nombre de usuario" required>
                    <div id="nfo"></div>
                  </div>
                  <!-- ./form-group -->
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Contraseña</span>
                    </div>
                    <input type="password" class="form-control" id="password" name="password" placeholder="Contraseña" required minlength="8">
                  </div>
                  <!-- ./form-group -->
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Rol de Usuario</span>
                    </div>
                    <select class="form-control" id="level" name="level" required>
                      <option value="">Selecciona el tipo de usuario</option>
                      <?php foreach ($groups as $group ):?>
                      <option value="<?php echo $group['group_level'];?>">
                        <?php echo ucwords($group['group_name']);?>
                      </option>
                      <?php endforeach;?>
                    </select>
                  </div>
                  <!-- ./form-group -->
                  <div class="input-group mb-3">
                    <div class="input-group-prepend">
                      <span class="btn btn-info">Status Usuario</span>
                    </div>
                    <select class="form-control" id="status" name="status" required>
                      <option value="">Selecciona el status del usuario</option>
                      <option value="1">Activo</option>
                      <option value="0">Inactivo</option>
                    </select>
                  </div>
                  <!-- ./form-group -->
                  <div class="form-group clearfix" style="float: right;">
                    <button type="button" id="add_user" name="add_user" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Crear</button>
                  </div>
                  <!-- ./form-group -->
                </div>
                <!-- ./col -->
              </form>
            </div>
            <!-- ./panel-body -->
          </div>
          <!-- ./panel default -->
        </div>
        <!-- ./card-body -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!--/. container-fluid -->


<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">¿Esta seguro de crear el usuario?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        Compruebe que los datos son correctos antes de crear el usuario
      </div>
      <div class="modal-footer">
        <button type="button" id="modalAdd" name="modalAdd" class="btn btn-primary">Crear Usuario</button>
        <button type="button" class="btn btn-secondary "data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

In this way, when you click on the button of the form, you will only open the modal and the modal button will send the form to be processed.

    
answered by 06.08.2018 в 18:37
GroupBox and CheckBox c # winforms Check if the value exists in the db and, if it does not exist, run update