how to unhide CSS element on input value change

Question

on a web page I'm working on, I got an input area that I'd like to show a hidden CSS element (a DIV) when the input value is set to be greater than 1.

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity_1842" value="0" size="4" maxlength="4" onchange="calculate(this.form);">

above is the code snippet of the input field, also please see image attached to see how the input looks on the page. Webpage Screenshot

So, if you see the image above, what I'm trying to achieve is to show a div HIDDEN with CSS when "Number of Individual Ticket Tickets:" input is changed to be greater than one.

https://stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element — sdev, Oct 29 '22 at 01:17

score 0 · Answer 1 · answered Oct 29 '22 at 01:23

0

Inside Calculate method you can add code to show your element,

If element div is hidden by CSS display = none

 document.getElementById("elementId").display = "block";

If element div is hidden by CSS visibility = hidden

 document.getElementById("elementId").visibility = "visible";

answered Oct 29 '22 at 01:23

MrMustafaDev22

77
5

what do you mean inside the calculate method, how ? – Mohamed Nagy Oct 29 '22 at 02:28
It the method that invoke when text changed: onchange="calculate(this.form) , but you can add code any where you want – MrMustafaDev22 Oct 29 '22 at 11:39

score 0 · Answer 2 · answered Oct 29 '22 at 03:29

try like below

//  hide / show - div
<div id="hidediv">hide this div</div>
....

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity_1842" value="0" size="4" maxlength="4" onchange="calculate(this.form);">
.....

// script fun
calculate() {
    ...
    ....
    if(this.form['tix_quantity'].value>1) {
        document.getElementById("hidediv").display = "none";
    }else {
        document.getElementById("hidediv").display = "block";
    }
    ...
}

No, unfortunately , non of these answers is working .. – Mohamed Nagy Oct 30 '22 at 16:16 — Mohamed Nagy, Oct 30 '22 at 16:16

score 0 · Answer 3 · answered Oct 29 '22 at 03:59

so you got a input field for a user to type a number into, if the user types a number greater then one into the box then unhide the div. that's actually pretty easy. you already got an onchange event that links to a function. all you need to do is place a simple if statement in that faction and use the line of code the other guy gave you.

if you put in the CSS display: none; then

if (ticket>1){
document.getElementById("tix_quantity_1842").display = "block";
}

if in the CSS it's visibility: hidden; then

if (ticket>1){
document.getElementById("tix_quantity_1842").visibility = "visible";
}

how to unhide CSS element on input value change

3 Answers3