I have been attempting to hide or completely conceal certain fields within the item class using jQuery, JavaScript, and HTML, however, the outcome has not been satisfactory.
<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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9afbf1eae9e8dafdf7fbf3f6b4f9f5f7">[email protected]</a></option>
<option value="3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e6e5eec7e0eae6eeeba9e4e8ea">[email protected]</a></option>
</select>
</div>
I am striving to make these specific fields invisible or entirely hidden with HTML, ensuring that users cannot detect any missing items on the form.
Check my code below:
I attempted to use JavaScript to hide only the input field, but the remaining properties still display:
<script type="text/javascript">
var net = document.getElementById('id_idnetwork');
net.style.display = 'hidden';
</script>
Similarly, when utilizing HTML, I found that only the input is hidden while other properties remain visible. Here is how I tried to achieve this using HTML IDs:
#id_user {
position: absolute;
display: none
}
#id_idplan {
position: absolute;
display: none
}