0

Así tal cual como dice la pregunta como puedo deshabilitar un botón según el valor del campo que este registrado en base de datos, en palabras mas palabras menos lo que deseo es deshabilitar el botón cuando en el campo de la base de datos se encuentre registrado valores como 0,1,2.

Inicialmente el botón se encuentra ubicado dentro de un <td> en una tabla que estoy construyendo por medio de una función en Javascript.

La función es la siguiente:

function format(d) {
    // `d` is the original data object for the row
    console.log(d);
      let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>                           
                            <th>
                                Total
                            </th>
                            <th style="display:none;">
                                Estatus
                            </th>                          
                        </tr>
                        </thead>
                        <tbody>`;
                            d.Factura.forEach(f => {
                                tabla += `<tr>                                                             
                                <td>${f.Total}</td>
                                <td style="display:none;">${f.Estatus}</td>                 
                                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCarga" onclick="Cargar('${f.Orden}' , '${f.Numero}')">Cargar</button></td>
                                </tr>`;
                            });
                       tabla += '</tbody></table>';
                       return tabla;   
}

Es importante resaltar que el campo en la base de datos cambiara según el criterio puede tener valores del 0 al 6 pero por ahora me interesa deshabilitar el botón para los valores 0,1,2, es necesario que esta información se consulte directamente a la base de datos.

Adicional la información en la tabla se esta cargando haciendo uso de PHP y un procedimiento almacenado, el código es el siguiente:

<?php
    header('Content-Type: text/html; charset=utf-8');
    //error_reporting(E_ALL ^ E_NOTICE);
    
    $param = $_POST['param'];   
    switch($param) {
        case '1': 
                $query = array();
                include './db/connect.php';
                $USER = utf8_encode($_POST['user']);
                $sql = "{call SPTest(?)}";              
                $params = array($USER);
                $stmt = sqlsrv_query($conn, $sql, $params);
                $stmt1 = sqlsrv_query($conn, $sql, $params);            
                if ( $stmt === false) {
                    die( print_r( sqlsrv_errors(), true) );
                }               
                //Se inicializa el arreglo antes del ciclo
                $query = [];
                $query1 = [];
                //Se necesita numero de orden de compra para agrupar
                $ultimaOrden = '';
                $ultimoNumero = '';
                
                while( $row1 = sqlsrv_fetch_array($stmt1) ) {
                    $record1 = array(
                        "Numero"  => $row1['Numero']
                        
                    );
                    array_push($query1, $record1);
                }
                
                while( $row = sqlsrv_fetch_array($stmt) ) {
                    
                if(strcmp($ultimaNumero, utf8_encode ($row['Numero'])) != 0) {
                
                    $query[$indice]["Numero"][] = [
                        "Orden"       => $row['Orden'],
                        "Numero"      => $row['Numero'],
                        "Total"       => $row['Total'],//Total
                        "Estatus"     => $row['Estatus'],           
                    ];
                
                    $ultimaNumero = utf8_encode ($row['Numero']);
                }               
                }

                sqlsrv_free_stmt( $stmt);       
                sqlsrv_close($conn);

                $json = [
                    "success"=> count($query) > 0 ? true : false,
                    "data"=>$query
                ];
                echo json_encode($json);
        break;  
  }
?>

El campo que contiene el valor que deseo validar corresponde a Estatus la consulta que contiene el procedimiento almacenado es el siguiente:

Select V.PURCHID as 'Orden',        
           V.ID as 'Numero',
           V.PRICE as 'Total',
           V.ESTATUS as 'Estatus'
    from VENTAS RC; 

Alguien tiene idea de como hacer posible esta validación consultando el valor a la tabla?

4
  • Porque no pasas el valor de Estatus al front end?
    – alanfcm
    Commented el 14 may. 2021 a las 20:34
  • @alanfcm Te refieres a mostrar el valor de Estatus en la tabla en un nuevo <td> ?
    – John Doe
    Commented el 14 may. 2021 a las 20:37
  • No necesitas mostrarlo, pero si lo necesitas para el condicional de mostrar o no el boton
    – alanfcm
    Commented el 14 may. 2021 a las 20:55
  • @alanfcm Ok, ahora actualice mi pregunta pasando el valor de Estatus al front como se indico al comienzo, como no deseo mostrarlo es por esta razón que agrego style="display:none;" al <td> y al <th> de la tabla
    – John Doe
    Commented el 14 may. 2021 a las 21:01

1 respuesta 1

0

No necesitas agregar el Estatus a la tabla, pero si lo necesitas para la condicional de habilitar o no el boton. Puedes hacerlo asi:

d = {}
d.Factura = [{"Orden"       :1,
                        "Numero"      :1,
                        "Total"       :100,//Total
                        "Estatus"     :0},
            {"Orden"       :2,
                        "Numero"      :2,
                        "Total"       :200,//Total
                        "Estatus"     :6}]
des = [0,2,3,5]
                      

function format(d) {
    // `d` is the original data object for the row
   
      let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>                           
                            <th>
                                Total
                            </th>
                            <th style="display:none;">
                                Estatus
                            </th>                          
                        </tr>
                        </thead>
                        <tbody>`;
                            d.Factura.forEach(f => {
                                tabla += `<tr>                                                             
                                <td>${f.Total}</td>
                                               
                                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCarga" onclick="Cargar('${f.Orden}' , '${f.Numero}')"`;
                                if (des.indexOf(f.Estatus) > -1) {
                                  tabla += ` disabled `;
                                }
                                tabla += `>Cargar</button></td>
                                </tr>`;
                            });
                       tabla += '</tbody></table>';
                       return tabla;   
}
var main = $("#main");
main.append(format(d))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main"></div>

8
  • Para el caso en que el botón sea deshabilitado en los valores 0,2,3,5 que instrucción se debe agregar ?
    – John Doe
    Commented el 14 may. 2021 a las 21:31
  • Ya edite mi respuesta, usa indexOf()
    – alanfcm
    Commented el 14 may. 2021 a las 21:45
  • Tu respuesta es muy buena pero aquí hay algo que me preocupa y es la manipulación del código html, javascript a través de la consola del navegador, con esto quiero decir que el usuario puede cambiar o eliminar el elemento disabled y poder acceder al botón habilitado, hay manera de evitar esto ? o alguna validación adicional desde el back ?
    – John Doe
    Commented el 14 may. 2021 a las 22:14
  • La validacion siempre tiene que ser doble, tanto en el front como en el back. Otra opcion seria no mostrar el boton en lugar de deshabilitarlo
    – alanfcm
    Commented el 14 may. 2021 a las 22:21
  • El botón es necesario mostrarlo con el objetivo de que al usuario se le sea notificado que así se encuentra, es posible que se pueda agregar la validación en el back ? Hay algún otro código que necesita ?
    – John Doe
    Commented el 15 may. 2021 a las 2:46

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.