Como saber si es vacio o null on campo por ID en Javascript

publicado por: Anonymous

Tengo esto:

<select id="division" multiple="multiple" title="Equipos seleccionados" style="width:143px;height:125px;overflow:scroll;">
<option value="1" title="Bundesliga">Bundesliga</option>
</select>

Estoy haciendole esto:

_spBodyOnLoadFunctionNames.push("hideFields");

function hideFields() {
    var control = findcontrol("equipo");
    control.parentNode.parentNode.parentNode.style.display = "none";
}

function showFields() {
    var control = findcontrol("equipo");
    control.parentNode.parentNode.parentNode.style.display = "block";
}

function findcontrol(field) {
    var arr = document.getElementById(field);
    return arr;
}

var values = document.getElementById('division').val();;
if (values != null || values != ''){
    showFields();
}

pero no me pasa a la funcion showFields();

Lo que quiero es que cuando no haya nada en division que no me muestre el equipo y cuando si hay algo en division que aparezca el equipo

Como lo hago en Javascript?
Javascript sin ninguna libreria. El codigo es generado por Sharepoint

Visualmente:

  • Al cargar la pagina por defecto

Al cargar la pagina por defecto

  • Al pasar una division a la parte derecha o seleccionarla

Al pasar una division a la parte derecha o seleccionarla

solución

Esta respuesta tiene ediciones sucesivas debido a las ediciones de la respuesta en la que se han ido facilitando más datos:

Editado para tener en cuenta tu última edición:

var values = document.getElementById('division').val();
if (values != null || values != ''){
    showFields();
}

El método .val() no existe en un nodo del DOM del documento HTML, sólo en jQuery. En ese caso el resultado es una matriz con todos y cada uno de los elementos seleccionados:

When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option. As of jQuery 3.0, if no options are selected, it returns an empty array; prior to jQuery 3.0, it returns null.

En castellano:

Cuando el primer elemento de la colección es un select-multiple (p.e., un elemento select con el atributo multiple activado), .val() devuelve una matriz que contiene el valor de cada option seleccionada. A partir de jQuery 3.0, si no hay opciones seleccionadas devolverá una matriz vacía; previo a jQuery 3.0 devolvía null.

El contenido de values no debería ser convertido a cadena de caracteres porque su contenido es una matriz. Podrías usar la propiedad .length para conocer el número de elementos que hay en ella:

var values = $('#division').val();
if (values != null || values.length > 0){
    showFields();
}

De esta manera cubres cualquier versión de jQuery.

Por otro lado, ese código se ejecutará una única vez durante la carga de la página. Necesitas agregar un evento que se ejecute cada vez que pulses en Agregar > (por poner un ejemplo).

Tu código y tu problema ya no es trivial y se vuelve algo complejo en el momento que no nos facilitas más información acerca del origen de los datos, si puedes seleccionar más de un equipo de una o más divisiones o no.

De cualquier manera, has dejado claro que sólo se puede tener una única división activa en todo momento, por lo que ya no necesitas el atributo multiple. No es necesario si sólo quieres seleccionar un único elemento a la vez, basta con usar size para obtener la misma apariencia visual:

_x000D_

_x000D_

// Simulo _spBodyOnLoadFunctionNames.push("hideFields");_x000D_
document.addEventListener("DOMContentLoaded", function() {_x000D_
  /* Precargamos estos objetos del DOM */_x000D_
  var division = document.getElementById('division');_x000D_
  var division_sel = document.getElementById('division_sel');_x000D_
  var equipo = document.getElementById('equipo');_x000D_
  /* Llamamos a la función que oculta los equipos,_x000D_
      aunque debería estar oculto por defecto */_x000D_
  hideFields();_x000D_
  /* Rellenamos los campos de las divisiones */_x000D_
  for (var elemento in datos) {_x000D_
    /* Creamos un objeto "option" */_x000D_
    var option = document.createElement('option');_x000D_
    /* Le asignamos los valores "name" y el contenido de texto */_x000D_
    option.name = elemento;_x000D_
    option.appendChild(_x000D_
      document.createTextNode(datos[elemento].nombre)_x000D_
    );_x000D_
    /* Agregamos el nodo al select */_x000D_
    division.appendChild(option);_x000D_
  }_x000D_
  /* Ahora agregamos el código para agregar elementos de la selección */_x000D_
  document.getElementById('agregar_division').addEventListener('click', function() {_x000D_
    /* Limpiamos la cajita de división seleccionada */_x000D_
    while (division_sel.firstChild) {_x000D_
      division_sel.removeChild(division_sel.firstChild);_x000D_
    }_x000D_
    /* Ahora agregamos el elemento seleccionado */_x000D_
    for (i = 0; i < division.options.length; i++) {_x000D_
      if (division.options[i].selected == true) {_x000D_
        /* Agregamos un nodo clonado del original (con mismo contenido) */_x000D_
        division_sel.appendChild(division.options[i].cloneNode(true));_x000D_
        /* Limpiamos el contenido previo de los equipos (debería estar borrado) */_x000D_
        while (equipo.firstChild) {_x000D_
          equipo.removeChild(equipo.firstChild);_x000D_
        }_x000D_
        /* Y ahora introducimos sus equipos en la caja de abajo */_x000D_
        for(var elemento in datos[division.options[i].name].equipos) {_x000D_
          /* Creamos un objeto "option" */_x000D_
          var option = document.createElement('option');_x000D_
          /* Le asignamos los valores "name" y el contenido de texto */_x000D_
          option.name = elemento;_x000D_
          option.appendChild(_x000D_
            document.createTextNode(_x000D_
              datos[division.options[i].name].equipos[elemento]_x000D_
            )_x000D_
          );_x000D_
          /* Agregamos el nodo al select */_x000D_
          equipo.appendChild(option);_x000D_
        }_x000D_
        /* Mostramos la caja de equipos */_x000D_
        showFields();_x000D_
      }_x000D_
    }_x000D_
  });_x000D_
  /* Ahora agregamos el código para quitar elementos de la selección */_x000D_
  document.getElementById('quitar_division').addEventListener('click', function() {_x000D_
    /* Limpiamos la cajita de división seleccionada */_x000D_
    while (division_sel.firstChild) {_x000D_
      division_sel.removeChild(division_sel.firstChild);_x000D_
    }_x000D_
    /* Limpiamos la cajita de equipos */_x000D_
    while (equipo.firstChild) {_x000D_
      equipo.removeChild(equipo.firstChild);_x000D_
    }_x000D_
    /* Ocultamos el campo de equipos */_x000D_
    hideFields();_x000D_
  });_x000D_
});_x000D_
_x000D_
function hideFields() {_x000D_
    /* No uses "parentNode...parentNode", es una mala práctica, se complicará_x000D_
        mantener el código HTML. Mejor selecciona el nodo exacto que quieras */_x000D_
    equipo.style.display = "none";_x000D_
}_x000D_
_x000D_
function showFields() {_x000D_
    equipo.style.display = "block";_x000D_
}_x000D_
_x000D_
/* Datos de ejemplo */_x000D_
var datos = {_x000D_
  'liga_es': {_x000D_
    nombre: 'Liga Española',_x000D_
    equipos: {_x000D_
      'equipo_esp_1': 'Equipo Español 1',_x000D_
      'equipo_esp_2': 'Equipo Español 2',_x000D_
      'equipo_esp_3': 'Equipo Español 3',_x000D_
    },_x000D_
  },_x000D_
  'liga': {_x000D_
    nombre: 'Liga Extranjera',_x000D_
    equipos: {_x000D_
      'equipo_ext_1': 'Equipo Extranjero 1',_x000D_
      'equipo_ext_2': 'Equipo Extranjero 2',_x000D_
      'equipo_ext_3': 'Equipo Extranjero 3',_x000D_
    },_x000D_
  },_x000D_
};

_x000D_

/* Centramos los contenidos en la celda */_x000D_
table td {_x000D_
  text-align: center;_x000D_
  vertical-align: middle;_x000D_
}_x000D_
/* Hacemos que los botones ocupen el ancho de la celda */_x000D_
table button {_x000D_
  width: 100%;_x000D_
  margin: 2px 0px;_x000D_
}

_x000D_

<table>_x000D_
  <tr>_x000D_
    <td>_x000D_
      <select id="division" size="3" title="División"_x000D_
          style="width: 143px; overflow: scroll;">_x000D_
      </select>_x000D_
    </td>_x000D_
    <td>_x000D_
      <button id="agregar_division">Agregar &gt;</button>_x000D_
      <button id="quitar_division">&lt; Quitar</button>_x000D_
    </td>_x000D_
    <td>_x000D_
      <select id="division_sel" size="3" title="División Seleccionada"_x000D_
          style="width: 143px; overflow: scroll;">_x000D_
      </select>_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td></td>_x000D_
  </tr>_x000D_
</table>_x000D_
<!-- Simulamos tres niveles de profundidad para tu campo -->_x000D_
<div><div><div>_x000D_
<select id="equipo" size="5"_x000D_
    title="Equipos seleccionados"_x000D_
    style="width: 143px; height: 125px; overflow: scroll;">_x000D_
</select><br/>_x000D_
</div></div></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *