form html and javascript div "display: none;"

Question

form html and javascript div "display: none;"

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

good try to show a layer when in one of the options of the form option is chosen, connect this code in js:

function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.formulario.tamanio.value != "") {
    //muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
    document.getElementById('resto').style.display='block';
    //por el contrario, si no esta seleccionada
} else {
    //oculta el div con id 'desdeotro'
    document.getElementById('resto').style.display='none';
}

}

but it's not working the fact is that the code I have working with radiobutton but to pass it to a selector has stopped working

The form starts like this:

and the selector that should show is this:

<select class="form-control form-control-lg" name="tamanio" id="tamanio" required>
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>

but it's not working for me and I can not find the problem

the call to the file js I have it above the form of the following form:

<script type="text/javascript" src="js/formulario.js" ></script>

If someone can help me, I would appreciate it very much

a greeting

javascript html formularios

asked by pablo 20.09.2018 в 11:50

source

2 answers

soCapture data from a row with JQuery - Ajax - Laravel Using SendGrid V1 and C # how do I delete an email from the lists without knowing the type?

score 1 · Answer 1

The question is a bit confusing, but I guess what you want is that when the value of the select changes it shows you an element with the id rest.

I have stated that the rest is an input but that element can be the one you want.

function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.getElementById('tamanio').value != "") {
    //muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
    document.getElementById('resto').style.display='block';
    //por el contrario, si no esta seleccionada
} else {
    //oculta el div con id 'desdeotro'
    document.getElementById('resto').style.display='none';
}
}

<select class="form-control form-control-lg" name="tamanio" id="tamanio" onchange="mostrarReferencia()" required>
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>
<br><br>
<input type="text" id="resto" value="Se muestra" hidden/>

score 0 · Answer 2

Try this:

function mostrarReferencia(elemento){

  const tamanio = document.getElementById('tamanio');
  const resto = document.getElementById('resto');
  
  if (elemento.value != "") { 
    resto.style.display='block'; 
  } else {
    resto.style.display='none';
  }

}

#resto{
border:1px solid red;
height:100px;
margin-top:50px;
}

<select class="form-control form-control-lg" name="tamanio" id="tamanio" required onChange="mostrarReferencia(this)">
    <option value="">Elige opción</option>
    <option value="30">30</option>
    <option value="45">45</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="125">125</option>
    <option value="150">150</option>
</select>

<div id="resto">DIV RESTO</div>