0

Tengo un formulario con html y bootstrap 4, nav nav-tabs. Quisiera saber, ¿cómo mantengo activa o seleccionada la pestaña después del Submit? Ello debido a que regresa a la primer pestaña cada que recorre el submit mi formulario. De antemano gracias.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


	<title>Sin título 2</title>
</head>

<body>

<form id="control" name="control" method="post" action=""  accept-charset="UTF-8">                                    
<div class="row">
            <div class="col-md-12">          
                <ul id="tabsJustified" class="nav nav-tabs">                    
                    <li class="nav-item"><a href="" data-target="#tab2" data-toggle="tab" class="nav-link text-uppercase active" style="font-family:Arial black;size: 27px;">PARTES <i class="fas fa-users fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" data-target="#tab3" data-toggle="tab" class="nav-link text-uppercase" style="font-family:Arial black;size: 27px;">DATOS GENERALES <i class="fas fa-id-card fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" data-target="#tab4" data-toggle="tab" class="nav-link text-uppercase" style="font-family:Arial black;size: 27px;">TIEMPOS <i class="fas fa-clock fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" data-target="#tab5" data-toggle="tab" class="nav-link text-uppercase" style="font-family:Arial black;size: 27px;">AUDIO Y VIDEO <i class="fas fa-video fa-lg"></i></a></li>
                    <li class="nav-item"><a href="" data-target="#tab6" data-toggle="tab" class="nav-link text-uppercase" style="font-family:Arial black;size: 27px;">CONCLUSIONES <i class="fas fa-clipboard-check fa-lg"></i></a></li>
                </ul>                
                <br />
                
                <div id="tabsJustifiedContent" class="tab-content" style="background-color: #E8DAD42">
                    
                    <div id="tab2" class="tab-pane fade active show" style="font-size:16.5px; text-align:center; font-family: Roboto;font-weight: bold;">                        
             111111                             
                    </div>
                    
<div id="tab3" class="tab-pane fade" style="font-size:16.5px; text-align:center; font-family: Roboto;font-weight: bold;">
  222222
  </div>
                              
     <div id="tab4" class="tab-pane fade" style="font-size:16.5px; text-align:center; font-family: Roboto;font-weight: bold;">
        333333
                    </div>
                          
<div id="tab5" class="tab-pane fade" style="font-size:16.5px; text-align:center; font-family: Roboto;font-weight: bold;">
         44444
            </div>
                          
         <div id="tab6" class="tab-pane fade" style="font-size:16.5px; text-align:center; font-family: Roboto;font-weight: bold;">
   5555
                    </div>
                </div>
            </div> 
        </div>
                
                
        <div class="contenedor">
            <button type="submit" class="btn btn-danger btn-lg btn-block" name="update">GUARDAR </button>   
        </div>    
 </form>   
</body>
</html>

2 respuestas 2

0

Al parecer usas ajax, por lo tanto puedes enviar los datos asincronicamente

$('#control').on('submit', function(e) { 
    e.preventDefault(); //Previene que se envié el formulario
    //puedes colocar aqui tu código para bloquear el botón y notificar
    //al usuario que se están enviando los datos
    $.ajax({
        url: '/url',
        type: 'post'
        data: $(this).serialize()
    }).done(function(res) {
        console.log(res); //Código ejecutado correctamente
    }).fail(function(err) {
        console.log(err); //hubo un error
    }).always(function() {
        console.log('finalizado'); //Se ejecuta al finalizar la petición
        //aqui puedes desbloquear el botón de submit
    });
});
0

Esto es lo que hace el boton submit.

<?php
require_once 'conexionMySQL3.php';

       $conn = dbConnect();
	   $OK = true;
	   $msg = '';
       
function strtoupper_utf8($string){
    $string=utf8_decode($string);
    $string=mb_strtoupper($string);
    $string=utf8_encode($string);
    return $string;
}

	if (array_key_exists('update', $_POST)){ 	   
	   
		$sql = 'UPDATE audiencia a INNER JOIN causa c ON a.no_causa = c.no_causa 
                        SET c.carpeta_investigacion= ?,a.num_audiencia= ?
                                    WHERE a.id_audiencia = ?';
                                    
                                    
		$stmt = $conn->prepare($sql);
		$OK = $stmt->execute(array(strtoupper_utf8($_POST['carpeta_investigacion']),$_POST['num_audiencia'],$_GET['id']));
                                 
		$error = $stmt->errorInfo();
		if (!$OK) {
			echo $error[2];
            echo $OK;
		} else {
            echo "<script>";
			echo "alert('BITACORA DE SALA / AUDIO Y VIDEO ACTUALIZADA');";
			echo "</script>";
			header("refresh:0;bitacora_sala.php?causa=".$_GET['causa'].'&id='.$_GET['id']);
            		exit;
		}
	}
?>

<?php

require_once 'conexionMySQL3.php';

   $conn = dbConnect();
   $OK = true;
   $msg = '';

function strtoupper_utf8($string){ $string=utf8_decode($string); $string=mb_strtoupper($string); $string=utf8_encode($string); return $string; }

if (array_key_exists('update', $_POST)){       

    $sql = 'UPDATE audiencia a INNER JOIN causa c ON a.no_causa = c.no_causa 
                    SET c.carpeta_investigacion= ?,a.num_audiencia= ?
                                WHERE a.id_audiencia = ?';


    $stmt = $conn->prepare($sql);
    $OK = $stmt->execute(array(strtoupper_utf8($_POST['carpeta_investigacion']),$_POST['num_audiencia'],$_GET['id']));

    $error = $stmt->errorInfo();
    if (!$OK) {
        echo $error[2];
        echo $OK;
    } else {
        echo "<script>";
        echo "alert('BITACORA DE SALA / AUDIO Y VIDEO ACTUALIZADA');";
        echo "</script>";
        header("refresh:0;bitacora_sala.php?causa=".$_GET['causa'].'&id='.$_GET['id']);
                exit;
    }
}

?>

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.