This code is designed to manage a user form where a person selects their continent from a dropdown list. It uses HTML for the form structure and jQuery (JavaScript library) to add dynamic behavior.
When the user selects a continent, the jQuery script checks which option was chosen. If the selected continent is "Antarctica", a message appears below the dropdown stating "Antarctica has no countries", and the submit button becomes disabled so that the user cannot submit the form. This is because Antarctica does not have any countries, so there is no point in proceeding further.
On the other hand, if the user selects any other continent such as Asia or Europe, the error message is hidden (if previously shown), and the submit button is re-enabled, allowing the user to submit the form. This script ensures that form submissions are only allowed for continents that have valid countries to select from. It helps improve user experience by preventing invalid input early on.
// This script will disable the submit button if Antarctica is selected from the dropdown
$(document).ready(function() {
$('#continent').on('change', function() {
const selectedContinent = $(this).val()
if (selectedContinent === 'Antarctica') {
$('#error_message').show();
document.getElementById("submit").disabled = true;
} else {
$('#error_message').hide();
document.getElementById("submit").disabled = false;
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Disable Button ON Selection In J-Query?</title>
</head>
<body>
<form method="post">
<div class="division">
<div class="division_single">
<label for="continent">Select your continent<span class="required">*</span> :</label>
<p id="error_message" style="color: red; display: none;">Antarctica has no countries</p>
<select id="continent" name="continent">
<option value="">-- Select Continent --</option>
<option value="Asia">Asia</option>
<option value="Africa">Africa</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Antarctica">Antarctica</option>
<option value="Europe">Europe</option>
<option value="Australia">Australia</option>
</select>
</div>
</div>
<input id="submit" type="submit" value="Submit" required>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
