Necesito ocultar o hacer que algún campo esté completamente oculto en algún campo de la clase de elemento. He intentado usar jquery, javascript y html pero el resultado no es demasiado bueno.
<div class="item"> <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" maxlength="12" required id="id_mobile_number"> </div> <div class="item"> <label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" value="true" maxlength="100" id="id_ported_number"> </div> <div class="item"> <label for="id_idplan">Idplan:</label>: <select name="idplan" required id="id_idplan"> <option value="" selected>---------</option> <option value="1">500 at 150 for 1month</option> </select> </div> <div class="item"> <label for="id_user">User:</label>: <select name="user" id="id_user"> <option value="">---------</option> <option value="2">akpsr@gmail.com</option> <option value="3">abi@gmail.com</option> </select> </div> Am trying to make some fields invisible or completely hidden with html but the result only hide only the input field or text property while the name of the html element still shows on the form. I want those field or element mark hidden to be completely hidden or completely invisible. users should not be able to know that there was supposed to be an item there.revisa mi código
i tried using javascript and only the input field is hidden while the form name and size and other still display <script type="text/javascript"> var net = document.getElementById('id_idnetwork'); net.style.display = 'hidden'; </script>Intenté usar html, pero solo la entrada está oculta mientras que el nombre y otras propiedades muestran que estoy usando la identificación html para obtener este campo.
#id_user { position: absolute; display: none } #id_idplan { position: absolute; display: none }Puedes ocultar hermanos:
[for="id_user"], [for="id_user"] ~ * /* hide siblings */ { position: absolute; display: none } [for="id_idplan"], [for="id_idplan"] ~ * /* hide siblings */ { position: absolute; display: none } <div class="item"> <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" maxlength="12" required id="id_mobile_number"> </div> <div class="item"> <label for="id_ported_number">Ported number:</label> <input type="text" name="ported_number" value="true" maxlength="100" id="id_ported_number"> </div> <div class="item"> <label for="id_idplan">Idplan:</label> <select name="idplan" required id="id_idplan"> <option value="" selected>---------</option> <option value="1">500 at 150 for 1month</option> </select> </div> <div class="item"> <label for="id_user">User:</label> <select name="user" id="id_user"> <option value="">---------</option> <option value="2">akpsr@gmail.com</option> <option value="3">abi@gmail.com</option> </select> </div> O una manera mucho mejor es agregar clases adicionales a los elementos .item , para que pueda controlarlo en su lugar:
.item4 { position: absolute; display: none; } .item3 { position: absolute; display: none; } <div class="item item1"> <label for="id_mobile_number">Mobile number:</label>: <input type="text" name="mobile_number" maxlength="12" required id="id_mobile_number"> </div> <div class="item item2"> <label for="id_ported_number">Ported number:</label>: <input type="text" name="ported_number" value="true" maxlength="100" id="id_ported_number"> </div> <div class="item item3"> <label for="id_idplan">Idplan:</label>: <select name="idplan" required id="id_idplan"> <option value="" selected>---------</option> <option value="1">500 at 150 for 1month</option> </select> </div> <div class="item item4"> <label for="id_user">User:</label>: <select name="user" id="id_user"> <option value="">---------</option> <option value="2">akpsr@gmail.com</option> <option value="3">abi@gmail.com</option> </select> </div>¿Quizás así?
#id_user { position: absolute; display: none } #id_idplan { position: absolute; display: none } label#hide_user {display:none;} select#hide_user {display:none;} <div class="item"> <label for="id_mobile_number">Mobile number::</label> <input type="text" name="mobile_number" maxlength="12" required id="id_mobile_number"> </div> <div class="item"> <label for="id_ported_number">Ported number::</label> <input type="text" name="ported_number" value="true" maxlength="100" id="id_ported_number"> </div> <div class="item"> <label id="hide_user" for="id_idplan">Idplan::</label> <select id="hide_user" name="idplan" required id="id_idplan"> <option value="" selected>---------</option> <option value="1">500 at 150 for 1month</option> </select> </div> <div class="item"> <label id="hide_user" for="id_user">User:: </label> <select name="user" id="id_user"> <option value="">---------</option> <option value="2">akpsr@gmail.com</option> <option value="3">abi@gmail.com</option> </select> </div>Desde el lanzamiento de HTML5 , ahora simplemente se puede hacer:
<div hidden>This div is hidden</div>Nota: Esto no es compatible con algunos navegadores antiguos, sobre todo IE < 11.