xxxxxxxxxx
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Input Check</title>
</head>
<body>
<h1>Check if Input Field is Empty Javascript</h1>
<form>
<label for="userInput">Enter text: </label>
<input type="text" id="userInput" oninput="checkInput()">
<button id="submitButton" disabled onclick="submitForm()">Submit</button>
</form>
<script>
function checkInput() {
var userInput = document.getElementById('userInput').value;
var submitButton = document.getElementById('submitButton');
if (userInput.trim() === '') {
submitButton.disabled = true;
} else {
submitButton.disabled = false;
}
}
function submitForm() {
alert('Form submitted!');
// Add your form submission logic here
}
</script>
<style>
label {
font-size: 18px;
margin-right: 10px;
}
input {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</body>
</html>