Criteria:
- Upon clicking a button from the selection of four buttons, all other buttons should become disabled except for the Next button.
- An alert window must appear when the Next button is clicked without selecting any other buttons, preventing navigation to the next page and keeping the user on the current page.
- The transition to the next page is only allowed if one of the four buttons is selected first, followed by clicking the Next button.
Challenges faced with the provided codes:
- I cannot seem to adjust the alignment of the Next button to the right corner of the container.
- The alert window displays a message regardless of whether a button is chosen before clicking the Next button or not.
- After clicking the OK button in the alert window, it proceeds to the next page even without fulfilling the necessary conditions.
style.css
h1
{
margin-top: 50px;
text-align: center;
}
.container {
margin: 50px;
height: 200px;
position: relative
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 3px solid green;
}
validation.js
function enable_disable()
{
$("#formDisable :input").prop("disabled", true);
}
function optionValidation (element)
{
if ((element.id != "optionA") && (element.id != "optionB") && (element.id != "optionC") && (element.id != "optionD"))
{
alert ("Please choose an option.");
}
}
first_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>First</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<div class="container">
<div class="center">
<form id="formDisable">
<div class="btn-group-vertical">
<button onclick="enable_disable()" type="button"
class="btn btn-primary" id="optionA">A</button>
<button onclick="enable_disable()" type="button"
class="btn btn-primary" id="optionB">B</button>
<button onclick="enable_disable()" type="button"
class="btn btn-primary" id="optionC">C</button>
<button onclick="enable_disable()" type="button"
class="btn btn-primary" id="optionD">D.</button>
</div>
</form>
<form action="second_page.html" method="post" onsubmit="optionValidation(this)">
<button class="btn btn-primary" type="submit">Next</button>
</form>
</div>
</div>
</body>
</html>
second_page.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Second</title>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome To Second Page</h1>
</body>
</html>
If anyone has any solutions to these issues, please share them!