0

Estoy tratando de asignar un array de elementos a un input para poder enviarlo por POST a un archivo en PHP tengo el siguiente codigo:

<select name="option" id="option" onclick="toggle(this)">
            <option value ="no" selected>Seleccione su opcion</option>
            <option value="Ana">Ana</option>
            <option value="Karla">Karla</option> 
            <option value="Jose">Jose</option>
            <option value="Termine">Termine</option>
        </select>
        <input type="hidden" name="list[]" id="list[]" value="list[]" >
        <input type="hidden" value="8" name="valor" id="name">
        <script>
             let name = []
            function toggle(o) {
           
            
            var el=document.querySelector("#option");
            var el2=document.querySelector("#list");
            
            if ((o.value != "") && (o.value != "Termine") && (o.value != "no")){ 
                if(name.includes(o.value)==true){
                    alert("Ya elegiste este elemento")
                    el.value="no";
                    return;
                }
                name.push(o.value);
                el.value="no";
            }
            if(o.value=="Termine"){
                console.log(name)  
                el2.value=name;
            }
            
            }
            </script>

Espero me puedan dar una sugerencia y como poder procesar un array en un archivo PHP

1 respuesta 1

1

Esta es mi sugerencia para arreglar tu código

let name = []

function toggle(o) {
  var el = document.querySelector("#option");
  var el2 = document.querySelector("#list");

  if ((o.value != "") && (o.value != "Termine") && (o.value != "no") && (o.value != "Reset")) {
    name.push(o.value);
    el.options[el.selectedIndex].setAttribute("disabled", "disabled");
  }
  if (o.value == "Termine") {
    el2.value = name;
    // aqui se deberian enviar los datos mediante un submit del formulario o peticion ajax
  }
  if (o.value == "Reset") {
    el2.value = '';
    for (i = 0; i < el.options.length; i++) {
      el.options[i].removeAttribute("disabled");
    }
    name = []
  }
  console.log(name);
  console.log(el2.value);
}
<select name="option" id="option" onchange="toggle(this)">
  <option value="no" selected>Seleccione su opcion</option>
  <option value="Ana">Ana</option>
  <option value="Karla">Karla</option>
  <option value="Jose">Jose</option>
  <option value="Termine">Terminé</option>
  <option value="Reset">Resetear selección</option>
</select>
<input type="hidden" name="list" id="list" value="">
<input type="hidden" value="8" name="valor" id="name">

Explicación

He realizado los siguientes cambios, a saber:

  1. En el HTML he cambiado el evento onclick por un onchange, pues de lo contrario tenia un comportamiento anómalo solo al hacer click sin seleccionar nada aún. Tambien podria haberlo quitado y poner un addEventListener("change") de ese elemento en el javascript, pero he intentado no cambiartelo todo.

  2. En el HTML he agregado esta nueva opción:

<option value="Reset">Resetear selección</option>

porque no habia forma de empezar de nuevo si se equivocaban. Al seleccionar esta nueva opción se reseteará toda la selección actual.

  1. En el HTML he cambiado esta línea:
<input type="hidden" name="list[]" id="list[]" value="list[]" >

por esta otra:

<input type="hidden" name="list" id="list" value="">

porque no enviaremos un array [], sino una lista serializada mediante comas, por lo tanto el name lo podemos dejar en list. Tambien lo he quitado del id (allí no tenia ningun sentido) y he dejado el value en nada porque se lo asignamos mediante el javascript.

  1. En el javascript he agregado una nueva condición && (o.value != "Reset") para evitar que al seleccionar la nueva opción Resetear selección se agrege a los datos a enviar. Quedando así:
if ((o.value != "") && (o.value != "Termine") && (o.value != "no") && (o.value != "Reset")) {
  1. En el javascript he eliminado esta comprobación:
if(name.includes(o.value)==true){
    alert("Ya elegiste este elemento")
    el.value="no";
    return;
}

por ser ya innecesaria, puesto que he preferido deshabilitar las opciones seleccionadas directamente mediante:

el.options[el.selectedIndex].setAttribute("disabled", "disabled");

y asi no hace falta que el usuario adivine si está seleccionada o no, pues si esta deshabilitada es que ya lo está.

  1. En el javascript he agregado un comentario para que sepas el lugar donde debes ejecutar la petición ajax o realizar el submit del formulario (que no lo veo definido en tu código) una vez seleccionen la opción "Terminé". En ese punto es donde debes enviar los datos al PHP, los cuales se enviarán serializados, es decir, del tipo "Ana,Karla,Jose". Ese valor lo puedes recoger en el PHP mediante:
$opciones = $_POST['list'];  // o GET o REQUEST, eso ya como tu envies la info
$datos_seleccionados = explode(",",$opciones);
print_r($datos_seleccionados);

y seguir su tratamiento allí como desees.

  1. Y finalmente he agregado el código correspondiente al reseteo de las opciones al seleccionar "Resetear selección":
if (o.value == "Reset") {
  el2.value = '';
  for (i = 0; i < el.options.length; i++) {
    el.options[i].removeAttribute("disabled");
  }
  name = []
}

donde se resetean todos lo valores y se quitan todos los disabled de las opciones previamente seleccionadas, con el fin de volver a empezar una selección.

Por cierto, este input dudo que haga falta en este contexto:

<input type="hidden" value="8" name="valor" id="name">

pues no hace nada ni se usa para nada, pero lo he dejado porque ya tiene un valor que no se para que lo usas.

Ya me dirás si te sirve.

1
  • Wow, que buena explicación, muchas gracias amigo, funcionó a la perfección :D Commented el 31 ene. 2022 a las 21:05

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.