1
function actualizar(){
$sql="UPDATE alumno SET nota='$nota' WHERE id='$id'";
                 $actualiz=mysqli_query($conexion, $sql) or die ("problemas al conectar");
}

Quiero que esta consulta se ejecute cuando le doy a un botón, me gustaría hacerlo de la forma más sencilla para un principiante. Se podría hacer con un onclik?

echo < button type='submit' class='btn' name='actualizar' value='Modificar' onclick=''/>';

Obviamente poniendo la función en onclick no hace nada, como se puede hacer?

8
  • Quieres hacerlo sin recargar la página? Si es así con PHP no se puede, debes utilizar Jquery y Ajax
    – msabate
    el 15 mar. 2018 a las 11:34
  • quiero que se actualice la base de datos, . No se cual sería la forma más sencilla pero creo que es mejor que no se actualice la página.
    – Ara
    el 15 mar. 2018 a las 11:43
  • Como dice @msabate, si quieres hacerlo sin recargar la página, tendrás que usar Ajax. Aquí tienes un ejemplo (Run - F9 para probar), en el cual se envía un id desde el formulario a la base de datos (en el servidor) mediante Ajax, se hace una consulta y se traen los datos para llenar el formulario. En tu caso sería lo mismo, sólo que en lugar de un SELECT harías un UPDATE. Otra cosa muy importante que tendrías que hacer es usar consultas preparadas, ya que como tienes tu UPDATE te podrían inyectar código malicioso con suma facilidad.
    – A. Cedano
    el 15 mar. 2018 a las 11:46
  • Podrías hacer un botón que ejecutara la funcion actualizar. Dicha función asigna las variables para el post y luego hace un refresh y coges las variables vía POST (o GET) y haces la consulta. La consulta iría dentro de un if(isset($_POST['nota'']).. Espero que lo hayas entendido :)
    – msabate
    el 15 mar. 2018 a las 11:50
  • @A.Cedano no entiendo el ejemplo, no tengo ni idea de ajax gracias de todas formas. Estoy intentando descifrarlo y a ver si puedo hacer algo
    – Ara
    el 15 mar. 2018 a las 15:10

2 respuestas 2

3

Esto se puede hacer fácilmente mediante una combinación de PHP/HTML/Ajax.

Teóricamente funciona de la siguiente manera:

  1. Desde el cliente,o sea, donde se presentan los datos al usuario, envías la petición al servidor a través de Ajax. En esa petición tienes que proveer al servidor los datos necesarios para trabajar. En este caso se necesitará un valor para nota y un id.
  2. El sevidor recibe y procesa los datos, intentando el UPDATE y respondiendo de nuevo al cliente sobre lo ocurrido. Para ese proceso de datos se necesita un archivo PHP, que es el que se indica en el parámetro url de la petición Ajax. Ese archivo hace como de intermediario entre el cliente y el servidor.
  3. Una vez procesada la información en el servidor, el cliente puede manejar lo que el servidor respondió en la parte done de la petición Ajax. Si hay algún error y los datos no se envían al servidor, el código entrará en fail, mostrando un alert u otra cosa que se le indique.

Es así como funciona en teoría.

Hay otras cosas que es interesante saber:

  • Los datos que se envían al servidor pueden ser preparados de varias maneras: serializando un formulario, construyéndolos manualmente, etc.
  • Las respuestas del servidor pueden ser de varios tipos. Lo más fácil es enviar una respuesta JSON, porque es un formato ligero y organizado que nos permite manejar datos estructurados.

Ahora veamos los diferentes componentes del programa.

1. Del lado del cliente

1a. Formulario

Tendremos en la parte HTML un formulario para recoger los datos que serán enviados al servidor.

<form id="frmActualizar" action="actualizar.php" method="post">
    <input type="text" name="ibxNota" placeholder="Escriba la nota" required/>
    <input type="number" name="ibxID"  placeholder="Escriba el ID" required/>
    <button id="btnActualizar">Enviar</button>
</form>
<div id="info"></div> 

Observa lo siguiente sobre el formulario:

  • En action hemos indicado cuál será nuestro archivo intermediario, más adelante verás que podemos usar esa propiedad para indicar ese dato a la petición Ajax.
  • En method hemos puesto el método, y usaremos también ese dato en la petición Ajax.
  • Con respecto a los dos input, dado que ambos valores son imprescindibles para procesar la petición, los hemos marcado con la etiqueta required, para obligar al usuario a poner datos en ellos.

También observa que hay un div identificado como info. Ese div servirá para mostrar al usuario mensajes adecuados sobre el estado de la petición.

1b. Petición Ajax

Tendremos por otra parte código Javascript para escuchar/recoger los datos del formulario y enviarlos al servidor.

Está todo comentado.

$(function() {
    /*Escuchamos el clic del botón*/
    $("#btnActualizar").click(function(e) {
        /*Esto evita que la página se refresque al enviar el form*/
        e.preventDefault();
        /*Identificamos el formulario*/
        var frm = $("#frmActualizar");
        /*Serializamos sus elementos*/
        var data = frm.serialize();
        /*Preparamos nuestra petición Ajax*/
        var request = $.ajax({
            url: frm.prop("action"),     //La tomamos de la propiedad action del form
            method: frm.prop("method"),  //La tomamos de la propiedad method del form
            data: data,                  //Los datos que construimos más arriba con serialize
            dataType: "json"             //Indicamos que esperamos una respuesta en json
        });
        /*En este bloque se manejan las peticiones exitosas*/
        request.done(function(res) {
            console.log(res);
            /*Ponemos en el div el contenido de status (JSON) que devuelve el servidor*/
            $("#info").html(res.status);
        });
        request.fail(function(jqXHR, textStatus) {
            alert("Hubo un error: " + textStatus);
            /*Ponemos en el div que hubo un error (esto no es obligatorio)*/
            $("#info").html("Error en la petición..."+textStatus);
        });
    });
});

2. Del lado del servidor

Este sería el contenido del archivo que se ejecutará del lado del servidor. En este caso sería el archivo actualizar.php, el que se ha indicado en el atributo action del formulario.

Algunas cosas importantes:

  • Para que funcione, la dirección debe ser correcta. Aquí se asume que actualizar.php está en la misma carpeta que el archivo que se ejecuta del lado del cliente. Si está en otra carpeta, debe especificarse dentro de las comillas de action.
  • Este formulario tomará el valor de las variables pasadas desde el formulario para ejecutar la consulta. El atributo que se debe leer es name.
  • El código usa consultas preparadas, para evitar ataques de Inyección SQL.
  • Dado que en la petición Ajax se espera un JSON, el código sigue un flujo lógico en el que va recogiendo en un array lo que pueda ir ocurriendo, poniendo mensajes informativos. Al final de todo se imprime ese array en forma de JSON. Ese mismo procedimiento se puede hacer para devolver datos organizados, por ejemplo, varias filas y columnas fruto de una consulta a la base de datos que luego deben presentarse en el cliente en forma de tabla u otro.

Este sería el código:

/*Usaremos operadores ternarios para guardar los valores del POST*/
$nota=(empty($_POST["ibxNota"])) ? NULL : $_POST["ibxNota"];
$id=(empty($_POST["ibxID"])) ? NULL : $_POST["ibxID"];

/*Variable que irá recogiendo lo ocurrido en el flujo del programa*/
$arrResult=array();

if ($nota && $id){
    $mysqli = ...//Esta sería la variable de conexión a la base de datos, completarla
    if($mysqli){
        $sql="UPDATE alumno SET nota=? WHERE id=?";
        $stmt=$mysqli->prepare($sql);
        if($stmt){
            $stmt->bind_param("si",$nota,$id);
            $statusUpdate=$stmt->execute();    
            $arrResult ["status"]=$statusUpdate ? "Filas actualizadas: ".$stmt->affected_rows : "No se pudo enviar la consulta: ".$stmt->error;
        }else{
            $arrResult ["status"]="Error preparando la consulta: ".$mysqli->error;
        }
    }else{
    $arrResult ["status"]="La conexión a la base de datos no es válida."        
    }
}else{
    $arrResult ["status"]="No se postearon datos válidos desde el cliente."        
}

header('Content-Type: application/json; charset=utf8');
echo json_encode($arrResult);

That's all. Si hay alguna duda, puedes preguntar en comentario.

Espero que sea de utilidad.

8
  • Sin duda una gran respuesta, aunque en lo personal me gusta confirmar al usuario si desea grabar sus datos si es asi en esta caso valido el form mediante jquery/javascript y si pasa dicha validacion hago el envio por ajax, al igual la respuesta usando el evento success y error de ajax mediante un dialog... me has sorprendido mucho tu explicacion muy comprensible y consisa..!! el 29 jun. 2018 a las 14:16
  • Gracias @Tegito123 yo indiqué una validación mínima mediante required en los input... creo que no convenía desviarse demasiado en eso para simplificar la respuesta. En cuanto a success y error, no sé si sabes que desde jQuery 3 han sido declarados obsoletos y recomiendan usar done y fail.
    – A. Cedano
    el 29 jun. 2018 a las 14:19
  • bueno la verdad llevo usandolo un buen hasta la actualidad y no me ha dado errores ni por console ni con el server.. pero voy a checar como es la nueva tendencia de peticion x ajax.. gracias !! el 29 jun. 2018 a las 14:21
  • @Tegito123 si miras la documentación, verás que jQuery ya no usa success en los ejemplos, e incluso ponen esta nota de obsolescencia: Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.
    – A. Cedano
    el 29 jun. 2018 a las 14:28
  • A. Cedano, también tengo un problema algo similar es una tabla grafica con botones simulando cajones de estacionamiento, me comentaron aplicar ajax y php para por der actualizar su estatus.
    – Miguel
    el 8 abr. 2021 a las 21:06
0

Si no quieres o no puedes usar AJAX, otra forma de hacerlo es cargar todos los registros en una tabla y aplicar filtros a ésta, por ejemplo con datatables. Pero si prefieres un ejemplo sencillo usando jQuery y hacerlo tu mismo, podrías aplicar una clase CSS a cada fila de producto con su ID y luego en javascript ocultas o muestras dichas clases. Lo mismo puedes añadir familias o cualquier otro filtro:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello, world!</title>
        <style>
            .filtros li {
                cursor: pointer;
            }
            .producto {
                width: 50%;
                margin: 0 auto;
                height: 150px;
                text-align: center;
                background-color: #0d0d0d;
                margin-bottom: 50px;
                margin-top: 50px;
                padding: 15px;
                color: #ffffff;
            }
        </style>
    </head>
    <body>

        <ul class="filtros">
            <li class="coche">Coches</li>
            <li class="moto">Motos</li>
            <li class="audi">Marcas audi</li>
        </ul>

        <div class="producto coche seat">coche seat</div>
        <div class="producto coche audi">coche audi</div>
        <div class="producto coche audi">otro coche audi</div>
        <div class="producto moto ducati">moto ducati</div>

        <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script>
            $(function() {
                $(".filtros li").click(function() {
                    var filtro = $(this).attr("class");
                    $(".producto").hide();
                    $("." + filtro).show();
                });
            });
        </script>
    </body>
</html>

Se puede hacer de mil formas y algunas mucho mejores, pero es una idea.

1
  • En la función javascript no se contempla varias clases como filtros, una pequeña modificación podría solucionar eso, simplemente haciendo un split por espacios contra las clases del filtro para luego aplicar un bucle al .show() para cada vuelta del bucle.
    – track3r
    el 17 mar. 2018 a las 12:47

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.