How do I create a toggle-able input disabler in HTML? - javascript

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>

Related

How to auto checked the checkbox and auto display the results when checked

This is my code for checkbox, I want to make this auto checked and display also the results when checked
<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>

You can add a function when the content is loaded,then set checkbox to be checked,finally invoke myFunction method
<!DOCTYPE html>
<html>
<body onload="init()">
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
function init(){
var checkBox = document.getElementById("myCheck");
checkBox.checked = true;
myFunction();
}
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>

$('#myCheck').prop('checked',true);
myFunction();
function myFunction()
{
if($('#myCheck').prop("checked") == true)
{
$('#text').show();
}
else
{
$('#text').hide();
}
}
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Display some text when the checkbox is checked:</p>
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text">Checkbox is CHECKED!</p>
</body>
</html>

How do I create an error alert for an invalid input?

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>

How Can I use form items in javascript

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>

how to display different function in a same textbox?

I have this html code with javascript. My average value displays correctly but my find minimum is not displaying anything. Its supposed to show when the user clicks on the find min button on the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var calculateGrade = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) ) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("average").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3=parseFloat($("exam3").value);
if ( (exam1<exam2) && (exam1<exam3)){
$("mini").value=exam1;}
else if ((exam2<exam1) && (exam2<exam3)){
$("mini").value=exam2;}
else {
$("mini").value=exam3;
}
}
window.onload = function () {
$("calculate").onclick = calculateGrade;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate Average</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="average"disabled ><br>
<label> </label>
<input type="button" id="calculate" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculate Your Grade</title>
<link rel="stylesheet" href="calc.css">
<script>
var $ = function (id) {
return document.getElementById(id);
}
var average = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
}
else {
var average = (exam1 + exam2 + exam3) / 3;
$("result").value = average;
}
}
var min = function () {
var exam1 = parseFloat($("exam1").value);
var exam2 = parseFloat($("exam2").value);
var exam3 = parseFloat($("exam3").value);
if (isNaN(exam1) || isNaN(exam2) || isNaN(exam3)) {
alert("All three entries must be numeric");
} else {
$("result").value = Math.min(exam1,exam2,exam3);
}
}
window.onload = function () {
$("average").onclick = average;
$("mini").onclick = min;
$("exam1").focus();
}
</script>
</head>
<body>
<section>
<h1>Calculate</h1>
<label for="exam1">Exam1:</label>
<input type="text" id="exam1"><br>
<label for="exam2">Exam2:</label>
<input type="text" id="exam2"><br>
<label for="exam3">Exam3:</label>
<input type="text" id="exam3"><br>
<label for="average"></label>
<input type="text" id="result" disabled ><br>
<label> </label>
<input type="button" id="average" value="Calc Avg">
<input type="button" id="mini" value="Find min">
</section>
</body>
</html>

The issue is with the min function. Instead of setting the value of textbox (probably, missing in your code example) you are setting the value of button "mini" (which is incorrect).
Update:
You need to be including one more textbox <input type="text" id="txtMin" disabled ><br>
and update your min function to set the value of it, as follows:
$("txtMin").value=exam1;
...
$("txtMin").value=exam2;
...
$("txtMin").value=exam3;

Javascript visibility hidden based on condition

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>

Categories