how to unhide CSS element on input value change-CodePudding

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"  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.

CodePudding user response：

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";

CodePudding user response：

try like below

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

<input type="text"  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";
    }
    ...
}

CodePudding user response：

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";
}