0

Como puedo enviar un form tomando en cuenta solo los datos de los select que se muestran en pantalla, omitiendo así los selectque están ocultos.

En la parte de Jquery tengo dos funciones que permiten ya sea mostrar u ocultar las otras columnas desplegables de acuerdo a su valor en el id, intenté cambiar los atributos con este id pero todo intento sin éxito.

i = 2;
$(document).ready(function() {
  $("#mostrar").on("click", function() {
    $('#categoria_' + i).show();
    if (i >= 1 & i <= 4) {
      i = i + 1;
    }
  });
  $("#ocultar").on("click", function() {
    if (i > 2) {
      i = i - 1;
    }
    $('#categoria_' + i).hide(); //oculto mediante id
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <form name="form" method="post" action="#">
    <input type="button" id="mostrar" name="boton1" value="Click para mostrar elementos">
    <input type="button" id="ocultar" name="boton2" value="Click pora ocultar elementos">

    <select name="categoria_1" id="categoria_1">
      <option name="1_option_1" selected>1 option 1</option>
      <option name="1_option_2">1 option 2</option>
      <option name="1_option_3">1 option 3</option>
      <option name="1_option_4">1 option 4</option>
    </select>

    <select name="categoria_2" id="categoria_2" style="display: none">
      <option name="2_option_1" selected>2 option 1</option>
      <option name="2_option_2">2 option 2</option>
      <option name="2_option_3">2 option 3</option>
      <option name="2_option_4">2 option 4</option>
    </select>

    <select name="categoria_3" id="categoria_3" style="display: none">
      <option name="3_option_1" selected>3 option 1</option>
      <option name="3_option_2">3 option 2</option>
      <option name="3_option_3">3 option 3</option>
      <option name="3_option_4">3 option 4</option>
    </select>
    <select name="categoria_4" id="categoria_4" style="display: none">
      <option name="4_option_1" selected>4 option 1</option>
      <option name="4_option_2">4 option 2</option>
      <option name="4_option_3">4 option 3</option>
      <option name="4_option_4">4 option 4</option>
    </select>
    <input type="submit" name="subir">
  </form>
</body>

<?php if(isset($_POST['subir'])){
  echo $_POST['categoria_1'] . "</br>";
  echo $_POST['categoria_2'] . "</br>";
  echo $_POST['categoria_3'] . "</br>";
  echo $_POST['categoria_4'] . "</br>";
} ?>

3 respuestas 3

0

Puedes crear un objeto FormData, recorrer los elementos select y agregar las parejas Clave-Valor de aquellos elementos donde la propiedad css display sea diferente de none. Por último, envía los datos con ajax.

El siguiente fragmento de código, solo recolecta los datos de los elementos select que no están ocultos.

var mydata = new FormData();
$('select').each(function () {
    if ($(this).css('display') != 'none')
        mydata.append(this.name, this.value);
});
0

Lamentablemente, si un imput esta dentro del Form, al hacer submit se envían todos, estén ocultos o no.

La mejor forma de realizar lo que necesitas es por ajax tal como lo indica Daniel en su comentario. Otra forma de hacerlo, es poniendo en otro campo oculto, cuales input están habilitados, asi desde donde proceses los datos, podrás tomar solo los que indica este campo especial. Recuerda que aunque estén ocultos los input pueden leerse y por lo tanto propenso a ser modificados a mano por un usuario malicioso...

0

Si le agregas el atributo disabled al select este no se envía con el formulario

<select name="carlist" form="carform" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

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.