0

Hecha la edición de esta pregunta gracias a las aportaciones de Benito-B y Triby, me han surgido preguntas relacionadas con el mismo problema/tema.

El problema que tengo en si es que necesito guardar los tres valores que seleccione en algo (cuando digo algo me refiero a guardar el dato) para que yo después seleccionando un botón se guarde en una base de datos.

Para introduciros un poco sobre mi problema, yo al principio quería guardar estos tres datos en tres variables, mediante un select, pero gracias a la explicación de Benito-B me hizo comprender que los arrays aquí también funcionan bien, dicho y hecho, lo cambié pero no me acabo de gustar los select, entonces lo cambié por una checkbox.

Podrán ver más abajo que las checkboxes están agrupadas por bloques (3 bloques) y un submit que obtiene los valores de los tres bloques. Mi código quedo al final así:

Esto es lo que hace el trabajo:

<?php
$letters = (isset($_POST['filter_order'])) ? $_POST['filter_order'] : [];




//Para imprimirlo:
$printable = "";
foreach($letters as $let){
    $printable .= $let . " ";
}

Esto son las checkboxes:

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
 <div class="container" id="input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
       
        
    </div>

    <div class="container" id="input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
        
        
    </div>

    <div class="container" id="input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
        
        
    </div>

    <input type="submit" name="submit" value="Get Values" />
</div>
</form>

Aquí los problemas que me ocurren son estos:

-Puedo seleccionar tres letras de cada bloque haciendo el total de 9 letras y el submit me las pasará las nueve, como se puede hacer que el submit solo acepte tres, pero al decir tres eso significa por ejemplo; 2 del primer bloque, y 1 del segundo, y 0 del tercero. O por ejemplo 1 del primer bloque, 1 del segundo y 1 del tercero. Que el submit al final solo coja tres letras (letras=unacheckbox).

-Luego otro problema que tengo es que $letters = (isset($_POST['filter_order'])) ? $_POST['filter_order'] : []; no me da nada de movilidad con mis tres letras seleccionadas, no se como puedo hacerlo para que el código guarde mis tres letras separadamente para que yo las pueda añadir luego en html con comodidad. Porque ahora mismo $_POST las tiene todas ahí juntas y va como un paquete.

-Otro problema pequeño es que por ejemplo se selecciona A B H, vale pero luego abajo sale otra vez. Una cosa así:

A B H
A B H

Cosa que no es necesaria, creo que esto ocurre aquí:

<?php
$letters = (isset($_POST['filter_order'])) ? $_POST['filter_order'] : [];




//Para imprimirlo:
$printable = "";
foreach($letters as $let){
    $printable .= $let . " ";
}
echo $printable;

?> 

Si has llegado hasta aquí, !Increíble! Gracias. Se que es una pregunta larga, pero sepan que no solo aceptaré la respuesta correcta con un gracias, a más del gracias intentaré dar de forma u otra recompensa a todos los contribuyentes con respuestas que me ayuden. Cualquier duda sobre el tema no duden en preguntar.

Referencia Triby:
Cuando inserto:

$letters = (isset($_POST['filter_order'])) ? $_POST['filter_order'] : [];

//Para imprimirlo:
$printable = implode(' ', $letters);

// También debes validar en PHP:
if(count($letters) != 3) {
    // Hubo error, porque no se marcaron 3 checkbox
    // Debes notificar al usuario, aquí solo un ejemplo
    die('Selecciona 3 checkboxes');

me salta el error Parse error: syntax error, unexpected end of file creo que esto proviene del implode, que de alguna forma esta creando este error, ya que cuando substituyo el código que me has enseñado por el de antes (para hacer una prueba), el error ya no salta.

//Para imprimirlo:
$printable = "";
foreach($letters as $let){
    $printable .= $let . " ";
}

7
  • Creo que en vez de haber cambiado totalmente la pregunta tendrías que haber abierto otra, ya que ahora es completamente diferente.
    – Benito-B
    Commented el 3 sept. 2020 a las 23:14
  • @Benito-B Entiendo, la pregunta fue editada a su mesura por causa a la recompensa que quise ofrecer, pero hice referencia como puede usted verlo en la primera línea de la pregunta editada, porque editaba, fuiste usted Benito una luz para mi, ya que al principio cuando hice mi pregunta era novato, pero gracias a usted me hizo entender mi propia pregunta, y la edité conjuntamente con investigaciones de mi propia cuenta, por ejemplo que es mejor utilizar checkboxes que selects en mi caso, y esto gracias a ti.
    – Jack More
    Commented el 3 sept. 2020 a las 23:30
  • @Benito-B Lamento que haya borrado su respuesta a esta pregunta, ya que daba mucho conocimiento a esta pregunta, y me habia ayudado un montón y sin ella ahora esto sería diferente. Entiendo que también que había recibido un voto negativo no mío absolutamente y que esto le haya hecho pensar en borrar la respuesta, me ofrezco a que si vuelve (si se puede) a insertar-la le daré mi voto positivo, no porque quiera, sino porque creo que hace bien a esta pregunta, y que aporta mucha información y riqueza a la pregunta. Gracias señor Benito, dejando en su mano el final de su respuesta,ledoygracias.
    – Jack More
    Commented el 3 sept. 2020 a las 23:36
  • 2
    No la borré por los votos, si no porque mi respuesta no aporta nada a la pregunta actual. No te preocupes, me alegra haber ayudado a que avances en el problema
    – Benito-B
    Commented el 3 sept. 2020 a las 23:39
  • @Benito-B Comprendo ahora el porque, y le doy las gracias señor Benito.
    – Jack More
    Commented el 3 sept. 2020 a las 23:45

2 respuestas 2

3

Para limitar la cantidad de checkboxes que se pueden marcar, es conveniente que cuando llegue al límite se desactive el resto. Revisa los comentarios para saber lo que hace cada instrucción y pregunta si tienes alguna duda.

En cuanto al código Javascript puedes tenerlo dentro del mismo HTML, pero te recomiendo guardarlo en un archivo, por ejemplo app.js y enlazarlo con <script src="app.js"></script>

// Ejecutar hasta que el dom haya cargado
document.addEventListener('DOMContentLoaded', function() {
    // Obtener todos los checkbox
    let checks = document.querySelectorAll('[name^="filter_order"]');
    // Recorrer elementos
    checks.forEach(check => {
        // Asignar evento
        check.addEventListener('change', check => cuentaChecks(check));
    });
    // Esta función se va a ejecutar cuando haya cambios
    function cuentaChecks(check) {
        // Obtener checkboxes marcados
        let marcados = document.querySelectorAll('[name^="filter_order"]:checked');
        // Si ya se seleccionaron 3, hay que deshabilitar el resto
        let dis = (marcados.length >= 3);
        // Recorres todos los select para habilitar o deshabilitar
        checks.forEach(check => {
            // Si está marcado debe quedar activo,
            // De lo contrario, se activa o desactiva de acuerdo a contador
            check.disabled = (check.checked) ? false : dis;
        });
    }
    // Asignar evento a formulario para verificar la cantidad de checkbox marcados
    document.querySelector('#form-1').addEventListener('submit', function(e) {
        // Obtener checkboxes marcados
        let marcados = document.querySelectorAll('[name^="filter_order"]:checked');
        // Si no se seleccionaron 3
        if(marcados.length != 3) {
            // Evitar que se envíe el formulario
            e.preventDefault();
            // Avisar al usuario que hay error
            alert('Marca 3 checkboxes');
        }
    });
});
.container {
    float:left;
    margin:20px 40px;
}
<form id="form-1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
 <div class="container input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
       
        
    </div>

    <div class="container input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
        
        
    </div>

    <div class="container input-order">
        <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
        <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
        
        
    </div>

    <input type="submit" name="submit" value="Get Values" />
</div>
</form>
<script src="app.js"></script>

Lo que necesitas en PHP es muy sencillo, primero, solo asegurarte de que hay algún checkbox seleccionado, porque solo se envían por formulario cuando están marcados.

Para mostrar tampoco necesitas un ciclo, solo usa la función implode() para unir los elementos existentes.

<?php
$letters = (isset($_POST['filter_order'])) ? $_POST['filter_order'] : [];

//Para imprimirlo:
$printable = implode(' ', $letters);

// También debes validar en PHP:
if(count($letters) != 3) {
    // Hubo error, porque no se marcaron 3 checkbox
    // Debes notificar al usuario, aquí solo un ejemplo
    die('Selecciona 3 checkboxes');
}

En PHP no olvides que siempre debes realizar validaciones, no importa si ya las hiciste en el navegador, cualquier usuario puede desactivar Javascript o, incluso, modificar lo que pasa en el navegador.

8
  • Una pregunta, pero el javascript nunca lo he tocado mucho, cosa que hecho mal, y no entiendo, para poner el código javascript para limitar el campo a tres hay que ponerlo en un <script></script> y luego llamarlo, o hay que hacer un .js para ese código, no entiendo muy bien eso. Entonces he estado repasando usted Triby sabría como añadir también en el código que no se pueda enviar el resultado sin tres letras (valores cogidos), con eso quiero decir poniendo un ejemplo que si el usuario escogiera solo dos valores en vez de tres, no pudiera darle al botón de submit o que diera una alarma.
    – Jack More
    Commented el 3 sept. 2020 a las 22:15
  • Menciono eso ya que por mi no entender de javascript , (que tengo que mejorar) la función de que si no hay tres seleccionados no dejará enviar (submit) los valores puede ser incluido en el código de javascript que me has mostrado. Triby, muchas gracias.
    – Jack More
    Commented el 3 sept. 2020 a las 22:17
  • Me gustaría preguntarle otra pregunta, el implode lo que hace es unir los valores no? No hay otra manera que se diera la opción a más de ver-los juntos de que se pudieran ver por separado, y claro ahí yo poder por ejemplo, que quiero ver el primer valor que él ha seleccionado en el <body> pues insertar solo el 1 valor de los tres. Pero ahora escribiendo se me ha ocurrido el poder guardar esos tres valores en una tabla, añadirles un id y mostrarlo por id llamando a la tabla. Que opina usted?
    – Jack More
    Commented el 3 sept. 2020 a las 22:26
  • Listo, actualicé la respuesta. En cuanto a acceder a cada variable, puedes hacerlo con echo $letters[0]; donde cero es el índice (primer elemento). En cuanto a guardarlo en una tabla independiente, creo que es la mejor opción, por buenas prácticas, solo asegúrate de relacionarla correctamente.
    – Triby
    Commented el 3 sept. 2020 a las 22:36
  • Vale! Voy a ir a probar el código, sobre entiendo que deben haber tres archivos, el html con los checkboxes donde el <script src=""></script> tiene que estar en el ¿header? o en el ¿body?, el form con las checkboxes estará en el body. Luego tiene que haber el archivo .js y luego un .php con el código que me has proporcionado?
    – Jack More
    Commented el 3 sept. 2020 a las 22:50
2
+50

Para restringir la cantidad de valores capturados, tiene dos opciones:

  1. Alterar el comportamiento de tu formulario con javascript (como por ejemplo con el script sugerido por @Triby)
  2. Realizar una validación desde el servidor, comprobando si lo enviado a través del formulario cumple con el criterio que esperas.

El script php sugerido para esto seria el siguiente:

<?php

//Comprobamos que se envian correctamente variables POST
if($_POST){
    //Comprobamos si se envió el arreglo 'filter_order' y si cumple con la condición de tener tres valores
    if(isset($_POST['filter_order']) &&  count($_POST['filter_order']) == 3){ //Aqui estableci que estrictamente deben ser 3 letras, pero si la condición es otra cambiar el criterio
        $arrletters = $_POST['filter_order'] //obtenemos las letras
        $txtLetters = implode(' ',$arrletters); //concadenamos los valores con un espacio
        echo $txtLetters; //imprimimos las letras       
    }
    else{
        echo 'Variable vacia o No se cumple con la condición';
    }
}
else{
    echo 'No se han enviado parametros';
    exit();
}

Edit 1

Con la finalidad que los errores y resultados se muestren en la misma hoja, implementando lo propuesto por Triby y el script sugerido, el resultado propuesto es el siguiente:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
            //Comprobamos que se envian correctamente variables POST
            if($_POST){
                //Comprobamos si se envió el arreglo 'filter_order' y si cumple con la condición de tener tres valores
                if(isset($_POST['filter_order']) &&  count($_POST['filter_order']) == 3){ //Aqui estableci que estrictamente deben ser 3 letras, pero si la condición es otra cambiar el criterio
                    $arrletters = $_POST['filter_order']; //obtenemos las letras
                    $txtLetters = implode(' ',$arrletters); //concadenamos los valores con un espacio
                    echo $txtLetters; //imprimimos las letras       
                }
                else{
                    echo 'Variable vacia o No se cumple con la condición';
                }
            }
            else{
                echo 'No se han enviado parametros';
            }
        ?>
        
        <form id="form-1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
            <div class="container input-order">
                <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
            </div>
            <div class="container input-order">
                <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
            </div>
            <div class="container input-order">
                <input type="checkbox" name="filter_order[]" value="A" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="B" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="C" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="D" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="E" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="F" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="G"  /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="H" /> This is checkbox <br />
                <input type="checkbox" name="filter_order[]" value="I"  /> This is checkbox <br />
            </div>
            <input type="submit" name="submit" value="Get Values" />
    </form>
    <script>
        //***********************************
        //  Script proporcionado por Triby
        //***********************************
        
        // Ejecutar hasta que el dom haya cargado
        document.addEventListener('DOMContentLoaded', function() {
            // Obtener todos los checkbox
            let checks = document.querySelectorAll('[name^="filter_order"]');
            // Recorrer elementos
            checks.forEach(check => {
                // Asignar evento
                check.addEventListener('change', check => cuentaChecks(check));
            });
            // Esta función se va a ejecutar cuando haya cambios
            function cuentaChecks(check) {
                // Obtener checkboxes marcados
                let marcados = document.querySelectorAll('[name^="filter_order"]:checked');
                // Si ya se seleccionaron 3, hay que deshabilitar el resto
                let dis = (marcados.length >= 3);
                // Recorres todos los select para habilitar o deshabilitar
                checks.forEach(check => {
                    // Si está marcado debe quedar activo,
                    // De lo contrario, se activa o desactiva de acuerdo a contador
                    check.disabled = (check.checked) ? false : dis;
                });
            }
            // Asignar evento a formulario para verificar la cantidad de checkbox marcados
            document.querySelector('#form-1').addEventListener('submit', function(e) {
                // Obtener checkboxes marcados
                let marcados = document.querySelectorAll('[name^="filter_order"]:checked');
                // Si no se seleccionaron 3
                if(marcados.length != 3) {
                    // Evitar que se envíe el formulario
                    e.preventDefault();
                    // Avisar al usuario que hay error
                    alert('Marca 3 checkboxes');
                }
            });
        });    
    </script>
        
        
    </body>
</html>

$_SERVER['PHP_SELF'] hace referencia a la misma hoja, por lo tanto al momento de enviar los datos desde tu formulario, estos son enviados a procesar al mismo documento, es por ello que se incrusta el código php, que hace la hace la logica de validación en el servidor e imprime el resultado (ya sea el esperado u otra advertencia que indicar).

Puedes probar el funcionamiento en este enlace: http://test.ingenierialabs.com/JackMore/1/

10
  • Entiendo, pero el mensaje de error sería dado en la misma página? Voy a ir probando, pero esto en este caso substituiría mi actual código, se vería repetido los valores seleccionados como es mi caso actual? Gracias señor Ricardo.
    – Jack More
    Commented el 3 sept. 2020 a las 22:27
  • A prior los mensajes de errores te servirán para depurar que esta ocurriendo con las variables. Este código como mencionas debe reemplazar el actual (el script que procesa los datos enviados por el formulario). En lo practico no debiese mostrar los valores repetidos. Commented el 3 sept. 2020 a las 22:33
  • Entiendo, pero este script esta escrito en php? Vale he hecho la misma pregunta a Triby, aquí se podría crear algún mensaje de error cuando el usuario le da a submit sin haber escogido los tres valores, por ejemplo que solo haya escogido dos, y le de al submit y que aparezca un error diciendo que tiene que escoger tres, gracias Ricardo.
    – Jack More
    Commented el 3 sept. 2020 a las 22:38
  • Para mostrar errores tienes dos opciones, una es utilizar javascript para manipular el evento submit de tu formulario de esa manera desde el lado del cliente se valida si se esta enviando correctamente los datos. La otra opción es mostrar un mensaje despues de enviar formulario, esto implica que la pagina se redirecciona al archivo señalado en el action del formulario y muestra el mensaje (seria el caso del script php). Commented el 3 sept. 2020 a las 22:43
  • 1
    ¡Excelente, aquí ya uniste todo el código y se ve funcional! +1
    – Triby
    Commented el 4 sept. 2020 a las 4:37

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.