I would like to show and hide a text based on the length of the text in textbox. i have tried the following code. But its not working. Help me out.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
if(x.length<1)
document.getElementById("lname").style.visibility = 'visible';
else
document.getElementById("lname").style.visibility = 'hidden';
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<div id="lname" style="visibility:hidden">hey im printing</div>
</body>
</html>
You should check the input value length:
var x=document.getElementById("fname");
if(x.value.length<1)
Use this
var x=document.getElementById("fname").value;
while assigning value to var x.
Try this
function myFunction()
{
var x=document.getElementById("fname").value;
if(x.length>=1)
{
document.getElementById("lname").style.visibility="visible";
}
else
document.getElementById("lname").style.visibility = 'hidden';
}
DEMO
Try this.
<input type="text" id="fname" onkeyup="myFunction()">
<div id="lname" style="visibility:hidden">hey im printing</div>
function myFunction()
{
var x=document.getElementById("fname");
if(x.value.length>0){
document.getElementById("lname").style.visibility = 'visible';
}else{
document.getElementById("lname").style.visibility = 'hidden';
}
}
Working DEMO
Check this out using jquery
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
function myFunction()
{
// var x=document.getElementById("fname").val();
var x=$("#fname").val();
alert(x.length)
if(x.length < 1) {
alert('if');
$("#lname").css("display", "block");
}
//document.getElementById("lname").style.visibility = 'visible';
else {
$("#lname").css("display", "none");
}
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<div id="lname" style="display:none">hey im printing</div>
</body>
</html>
Related
So, basically i have a textbox and file upload button . What i want when user enter integer in textbox for eg :10 then i want to display file upload button 10 times.
Here is a working demo hope it will helpful for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function AppendRow(e) {
var val = e.value;
if (val !== "") {
var html ='';
for (var i = 0; i < val; i++) {
html +='<input type="file" id="file">';
}
$("#append").empty().append(html);
}
}
</script>
</head>
<body>
<input type="text" id="input1" onkeyup="AppendRow(this)"/>
<div id="append">
<div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").keyup(function(){
var val = $(this).val();
if (val !== "") {
var html;
for (var i = 0; i < val; i++) {
html = '<input type="file" id="file">';
$("#append").append(html);
}
}
});
});
</script>
</head>
<body>
<input type="text" id="input" />
<div id="append">
</div>
</body>
</html>
Please use the following code
<input [(ngModel)]="count" />
<div *ngFor="let item of [].constructor(count); ">
<input type='file'>
</div>
I am creating a date input and I want an error alert if the date input is left blank.
currently I have and it doesnt work:
<!Doctype html>
<html>
<head>
<script type="text/javascript">
function validateDate(value) {
var a = document.getElementById("date").value;
if (a = = = "") {
window.alert("Error");
return false;
}
}
</script>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type=“date” id=“date” name=“date”><br>
<button id=teeTime onClick="validateDate()">Submit</button><br>
</div>
</form>
</body>
</html>
Do not put spaces in your operators, use === not = = =, a better use to say if a !== "" if a is NOT an empty string
Try this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tee Time Sign-up Form</h1>
<form>
<div id="teeDate">
Date:<input type="date" id="date" name="date" /><br />
<button id="teeTime">Submit</button><br />
</div>
</form>
<script type="text/javascript">
var button = document.getElementById("teeTime");
function validateDate(value) {
if (value === "") {
window.alert("Error");
return false;
}
}
button.addEventListener("click", function (e) {
var value = document.getElementById("date").value;
validateDate(value);
});
</script>
</body>
</html>
If the title didn't describe my question great enough, this is what I want to create: a input that I can disable/enable with a button. This is what i have done so far:
<!DOCTYPE html>
<html>
<head>
<title>Toggle-able input</title>
</head>
<body>
<input type="text" id="myFile">
<button onclick="myFunction()">Enable/disable</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("myFile");
if (x.disabled === false) {
x.disabled = true;
} else {
x.disabled = false;
}
</script>
You did not close your function properly
function myFunction() {
var x = document.getElementById("myFile");
if (x.disabled === false) {
x.disabled = true;
} else {
x.disabled = false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Toggle-able input</title>
</head>
<body>
<input type="text" id="myFile">
<button onclick="myFunction()">Enable/disable</button>
</body>
<input type="text" id="myFile">
<button onclick="myFunction()">Enable/disable</button>
</body>
<script>
function myFunction() {
var x = document.getElementById("myFile");
if (x.disabled === false) {
x.disabled = true;
}
else {
x.disabled = false;
}
} // << You were missing this.
</script>
<!DOCTYPE html>
<html>
<body>
<input type="text" id="myFile">
<button onclick="myFunction()">Enable/disable</button>
<script>
var togg = true;
function myFunction() {
document.getElementById("myFile").disabled = togg;
togg = !togg;
}
</script>
</body>
</html>
I hope I'm not repeating a question but I've searched around and couldnt find help so I thought I should ask directly, I'm still a beginner and this is an assignment for my class so please be as thorough as possible
I'm trying to create a form where as the user clicks on another field, it checks if the input he put in the first one is as required by the website, without having to click enter or a submit button.
this is the HTML file.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
$(document).ready(function(){
$("div.ID").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
$("div.ID").focusout(function(){
$(this).css("background-color", "#FFFFFF");
userid_validation(userid,5,12);
});
});
</script>
</head>
<body>
<div class="ID" >
User ID: <input type="text" name="userid" size="12" />
</div>
<div class="pass">
Password: <input type="text" name="psw" size="12" />
</div>
</body>
</html>
and this is the JS file
function userid_validation(userid,mx,my)
{
var uid_len = userid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
//uid.focus();
return false;
}
return true;
}
I'm most probably doing something completely wrong but I don't know what. thanks in advance !
You need to apply focusin and foucsout on input elements. Currently you have applied it on div. Also you have code error on calling following function,
userid_validation(userid, 5, 12); // userid not defined.
Please check if this works.
function userid_validation(userid, min, max) {
var uid_len = userid.length;
if (uid_len == 0 || uid_len > max || uid_len < min) {
alert("User Id should not be empty / length be between " + min+ " to " + max);
//uid.focus();
return false;
}
return true;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
$(document).ready(function() {
$("div.ID").find('input').focusin(function() {
$(this).css("background-color", "#FFFFCC");
});
$("div.ID").find('input').focusout(function() {
$(this).css("background-color", "#FFFFFF");
userid_validation($(this).val(), 5, 12);
});
});
</script>
</head>
<body>
<div class="ID">
User ID:
<input type="text" name="userid" size="12" />
</div>
<div class="pass">
Password:
<input type="text" name="psw" size="12" />
</div>
</body>
</html>
I want to use HTML form elements in JavaScript. I used them like this but it doesn't work:
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<script src="script.js"></script>
...and the JavaScript code was like this:
var s1 = 60;
function f1() {
``
if (document.M.elements[0] == s1) {
window.location = 'tick.htm';
} else {
window.location = 'cross.htm';
}
}
What is wrong here?
Just to give some clarification on why this was not working. In the test, document.M.elements[0] is a reference to the input object, not the value of the input. Using document.M.elements[0].value gives us the current value of the input.
//Ignore this, for display only.
function output(msg) {
var element = document.getElementById('output');
element.innerHTML = msg;
};
function f1() {
var s1 = 60;
if (document.M.elements[0].value == s1) {
output('Pass');
} else {
output('Fail');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form name="M">
<input name="in1" type="text" id="in1">
<input type="button" name="btn1" id="btn1" value="Check" onclick="f1()">
</form>
<b id="output"></b>
</body>
</html>