Saltar de input en Formulario con tecla Intro

publicado por: Anonymous

Buen dia a todos, quisiera que me colaboraran, quiero que al momento de pasar de input no sea con la tecla Tab sino con Intro, este es mi codigo, Muchas gracias por la ayuda.

  <?php

session_start();

if (empty($_SESSION["DataUser"]["idUsuario"])){
    header("Location: login.php");
}
$_SESSION["user"]=$_SESSION["DataUser"]["idUsuario"];
?>


<!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8" />
    <title>Sanoha Ltda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Coderthemes" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/Icono_Sanoha.ico">



    <!-- CONTROLADORES NECESARIOS -->
    <?php require "../../../../Controlador/trabajadorController.php";?>
    <?php require "../../../../Controlador/novedadController.php";?>


    <!-- INCLUDE SCRIPTS -->
    <?php include ("Pages/Includes/Imports.php") ;?>

    <!-- ESTILO TABLA -->
    <style>
        table, th, td {
            border: 1px solid #206736;
        }
    </style>



</head>


<body>

<!--Begin Page-->
<div id="wrapper">

    <!-- Top Bar Start -->
    <?php include ("Pages/Includes/Top-Bar.php")?>
    <!-- Top Bar End -->


    <!-- ========== Left Sidebar Start ========== -->
    <?php include("Pages/Includes/Left-Sidebar.php")?>
    <!-- Left Sidebar End -->


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="content-page">

        <!-- Start content -->
        <div class="content">
            <div class="container-fluid" >

                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <h4 class="page-title float-left">Betéitiva</h4>

                            <ol class="breadcrumb float-right">
                                <li class="breadcrumb-item"><a href="Index.php">Sanoha Ltda</a></li>
                                <li class="breadcrumb-item"><a href="adminUsuario.php">Betéitiva</a></li>
                                <li class="breadcrumb-item active">Reporte Diario</li>
                            </ol>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- end row -->


                <div class="row">

                    <div id="alertas" class="center-page">
                        <?php if(!empty($_GET["respuesta"]) && $_GET["respuesta"] == "correcto"){ ?>
                            <div class="alert alert-icon alert-success alert-dismissible fade show">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                <i class="mdi mdi-check-all"></i>
                                <strong>Registrado!</strong> Ha registrado exitosamente el reporte. Para tener un informe
                                quincenal ingrese
                                <a href="index.php" class="alert-link">Aquí</a> .
                            </div>
                        <?php } ?>

                    </div>


                    <div class="col-lg-12 center-page">

                        <div class="card-box">

                            <h4 class="text-center text-custom"><strong>REPORTE DIARIO BETÉITIVA</strong></h4>

                            <p class="text-muted font-14 m-b-20" align="justify">
                                Aquí usted puede registrar las labores mineras que se están creando. Recuerde que debe tener
                                los datos requeridos que son: Descripción y Abreviatura.
                            </p>

                            <br>

                            <br>

                            <form role="form" method="post" action="../../../../Controlador/reporteBeteitivaController.php?action=crear">

                                <div class="row ">
                                    <div class="col-xs-9 center-page" style="width: 83%">

                                        <div class="row ">

                                            <div class="col-lg-6">
                                                <label for="Trabajador"><strong>Trabajador</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Trabajador" name="Trabajador" required >
                                                    <?php echo trabajadorController::selectTrabajadorBeteitiva(true, "idTrabajador", "idTrabajador", "form-control"); ?>

                                                </select>
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Labor"><strong>Labor Minera</strong></label>
                                                <input type="text" id="Labor" class="form-control" disabled="" >
                                            </div>

                                        </div>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label for="Nombre"><strong>Nombre</strong></label>
                                                <input type="text" id="Nombre" class="form-control" disabled="" >
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Centro"><strong>Centro Costo</strong></label>
                                                <input type="text" id="Centro" class="form-control" disabled="" >
                                            </div>
                                        </div>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label for="Frente"><strong>Frente Trabajo</strong></label>
                                                <input type="text" id="Frente" class="form-control" disabled="" >
                                            </div>

                                            <div class="col-lg-6">
                                                <label for="Fecha"><strong>Fecha</strong><span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" placeholder="yyyy/mm/dd"  name="Fecha" id="datepicker-autoclose">
                                                    <span class="input-group-addon bg-success b-0"><i class="mdi mdi-calendar text-white"></i></span>
                                                </div><!-- input-group -->
                                            </div>

                                        </div>

                                        <br>

                                        <br>


                                        <div class="row" >
                                            <div class="col-lg-12 "  >

                                                <table class="table m-0 table-colored table-success " >
                                                    <thead>
                                                    <tr>

                                                        <th style="text-align: center" data-toggle="tooltip" title="Vagoneta de Carbón">VC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Vagoneta de Roca">VR</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta de Avance">PA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta Refuerzo Guía">PRG</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Puerta Refuerzo Inclinado">PRI</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Tacos">TAC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Tramos de Carrilera">TRM</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Malacate">MLC</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Benda">BENDA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Envasada">EVS</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td><input style="text-align: center" type="text" value="0" name="VC" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="VR" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PRG" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="PRI" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="TAC" class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="TRM" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MLC"  class="form-control" onkeypress="return valida(event)"></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="BENDA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="EVS" class="form-control" onkeypress="return valida(event)"></td>

                                                    </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>


                                        <br>


                                        <div class="row" >
                                            <div class="col-lg-10 center-page" >

                                                <table class="table m-0 table-colored table-success " >
                                                    <thead>
                                                    <tr>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Administracion">ADM</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Cargue">CRG</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Cuadros">CDS</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Canastas">CNST</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Avance">MTA</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Ensanche">MTDCH</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Metros de Destape">MTDPT</th>
                                                        <th style="text-align: center" data-toggle="tooltip" title="Otros">Otros</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td><input style="text-align: center" type="text" value="0" name="ADM" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CRG" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CDS" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="CNST" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTA" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTDCH" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="MTDPT" class="form-control" onkeypress="return valida(event)" ></td>
                                                        <td><input style="text-align: center" type="text" value="0" name="Otros" class="form-control" onkeypress="return valida(event)" ></td>

                                                    </tr>
                                                    </tbody>
                                                </table>

                                            </div>

                                        </div>


                                        <br>

                                        <br>

                                        <br>

                                        <div class="row">
                                            <div class="col-lg-2 center-page" >
                                                <label for="Asistio"><strong>Asistió</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Asistio" name="Asistio" required >
                                                    <option>Si</option>
                                                    <option>No</option>
                                                </select>
                                            </div>

                                            <div class="col-lg-4 center-page">
                                                <label for="Novedad"><strong>Novedad</strong><span class="text-danger">*</span></label>
                                                <select class="selectpicker show-tick" data-style="btn-verde btn-bordered" id="Novedad" required name="Novedad">
                                                    <?php echo novedadController::selectNovedad(true, "idNovedad", "idNovedad", "form-control"); ?>
                                                </select>
                                            </div>

                                            <div class="col-lg-2 center-page">
                                                <label for="Horas"><strong>Horas Trabajo</strong><span class="text-danger">*</span></label>
                                                <input type="number" id="Horas" name="HorasTrabajo" class="form-control" required  >
                                            </div>

                                            <div class="col-lg-4 center-page">
                                                <label for="Observaciones"><strong>Observaciones</strong><span class="text-danger">*</span></label>
                                                <textarea class="form-control" name="Observaciones" rows="5" required></textarea>
                                            </div>

                                        </div>

                                        <br>

                                        <div class="row">


                                        </div>



                                        <br>

                                        <br>

                                        <br>

                                        <div class="form-group text-center">

                                            <button type="reset" class="btn btn-gris font-15" style="border-radius: 5px">
                                                <strong>Cancelar</strong>
                                            </button>



                                            <button type="submit" class="btn btn-verde  font-15" value="validate"   style= "border-radius: 5px">
                                                <strong>Registrar</strong>
                                            </button>

                                        </div>

                                    </div>

                            </form>

                        </div>

                        </div> <!-- end card-box -->
                    </div>
                    <!-- end col -->

                </div>
                <!-- end row -->

            </div> <!-- container -->

        </div> <!-- content -->

        <footer class="footer text-right">
            2018 © Sanoha LTDA.
        </footer>

    </div>


    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->


</div>
<!-- END wrapper -->


<!-- IMPORT -->
<?php include ("Pages/Includes/Includes-Footer.php");?>


</body>
</html>

solución

Podrías hacerlo con jQuery agarrando el evento keydown en los input, select y textarea. Por ejemplo:

_x000D_

_x000D_

$("body").on("keydown", "input, select, textarea", function(e) {_x000D_
  var self = $(this),_x000D_
    form = self.parents("form:eq(0)"),_x000D_
    focusable,_x000D_
    next;_x000D_
  _x000D_
  // si presiono el enter_x000D_
  if (e.keyCode == 13) {_x000D_
    // busco el siguiente elemento_x000D_
    focusable = form.find("input,a,select,button,textarea").filter(":visible");_x000D_
    next = focusable.eq(focusable.index(this) + 1);_x000D_
    _x000D_
    // si existe siguiente elemento, hago foco_x000D_
    if (next.length) {_x000D_
      next.focus();_x000D_
    } else {_x000D_
      // si no existe otro elemento, hago submit_x000D_
      // esto lo podrías quitar pero creo que puede_x000D_
      // ser bastante útil_x000D_
      form.submit();_x000D_
    }_x000D_
    return false;_x000D_
  }_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<form action="#">_x000D_
  <input type="text" />_x000D_
  <input type="text" />_x000D_
  <select>_x000D_
    <option>valor 1</option>_x000D_
    <option>valor 2</option>_x000D_
  </select>_x000D_
</form>

_x000D_

_x000D_

_x000D_

El html es un ejemplo básico para que puedas testearlo pero debería funcionar con lo que pusiste.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *