How to show a input text field when a value is entered in input number type field in javascript?
Question
I m working on a form which have a field called amount field on which when a number is greater than 2000 than a pan card field is to be shown automatically as soon as the value is entered , I tried using javascript but i end up by this code below :
var amnt=document.getElementById("amount").value; var pandiv=document.getElementById("pancarddiv"); function showPanfield(){ if(amnt.value >= 2000){ pandiv.style.display="block"; } else{ pandiv.style.display="none"; } } <!doctype html> <html lang="en"> <head> <title>Donation Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <style> div#pancarddiv { display: none; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <form action="" method="POST"> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Full Name*</label> <input type="text" class="form-control" id="name" name="fname" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Postal Address*</label> <textarea class="form-control" rows="4" id="Address" name="address" required></textarea> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Mobile No.*</label> <input type="number" class="form-control" id="mobileno" name="mobile" required/> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Email Id*</label> <input type="email" class="form-control" id="email" name="email" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Amount (Rs.)*</label> <input oninput="showPanfield()" type="number" class="form-control" id="amount" name="amount" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="pancarddiv"> <label>Pan Card No*</label> <input type="text" class="form-control" id="panid" name="panid"/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> </div> </body> </html>
I hope if some one could help me to solve it that where im lagging.
2 answers
solution1
0 ACCPTED 2020-03-25 10:10:33
The problem is because you get the value of amount field once outside the function. You just need to change your amnt variable to be the amount element, not its value:
var amnt=document.getElementById("amount"); var pandiv=document.getElementById("pancarddiv"); function showPanfield(){ if(amnt.value >= 2000){ pandiv.style.display="block"; } else{ pandiv.style.display="none"; } } <!doctype html> <html lang="en"> <head> <title>Donation Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.min.js"></script> <style> div#pancarddiv { display: none; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <form action="" method="POST"> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Full Name*</label> <input type="text" class="form-control" id="name" name="fname" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Postal Address*</label> <textarea class="form-control" rows="4" id="Address" name="address" required></textarea> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Mobile No.*</label> <input type="number" class="form-control" id="mobileno" name="mobile" required/> </div> <div class="col-lg-6 col-md-6 col-sm-12 form-group"> <label>Email Id*</label> <input type="email" class="form-control" id="email" name="email" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <label>Amount (Rs.)*</label> <input oninput="showPanfield()" type="number" class="form-control" id="amount" name="amount" required/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group" id="pancarddiv"> <label>Pan Card No*</label> <input type="text" class="form-control" id="panid" name="panid"/> </div> <div class="col-lg-12 col-md-12 col-sm-12 form-group"> <button type="submit" class="btn btn-default">Submit</button> </div> </form> </div> </div> </body> </html>
solution2
0 2020-03-25 10:11:04
Two issues on this code
document.getElementById("amount").valuereturns a string so if you expect to get a number you should cast it as a number (eg using the unary + operator )In the
ifstatement you're trying a to still access to a not-existantvalueproperty ofamntvariable which is a string and not an object
So to solve both the issues change the statement into
if (+amnt >= 2000) {
...
}
As a side note if you use an inline event handler you should not use parenthesys since you are assigning a function oninput="showPanfield"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.