index.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Page Loading with Login, Active Page, and Completed Pages</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <style> #content-container { margin: 10px; padding: 10px; border: 1px solid #ddd; } #page-list { list-style: none; padding: 0; } #page-list li { margin-bottom: 5px; cursor: pointer; } #page-list li.active { background-color: #007bff; color: #fff;
Posts
Showing posts from January, 2024
Select one checkbox at a time from group of checkbox
- Get link
- Other Apps
Select one checkbox at a time from group of checkbox <div class="btn-group" role="group" onclick="selectOne(event)"> <input type="checkbox" class="btn-check" id="btncheck1" value='1' autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label> <input type="checkbox" class="btn-check" id="btncheck2" value='2' autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label> <input type="checkbox" class="btn-check" id="btncheck3" value='2' autocomplete="off"> <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label> </div> <script> function selectOne(event) { const clickedElement = event.target;
Form Validation
- Get link
- Other Apps
Form Validation <!DOCTYPE html> <html> <head> <title>Form Validation</title> </head> <body> <form id="loginForm"> <input type="text" name="username" required placeholder="Username" data-error-msg="Username is required"><br><br> <input type="password" name="password" required placeholder="Password" data-error-msg="Password is required"><br><br> <input type='text' class='form-control' data-error-msg="Data required" required> <!-- Additional form fields --> <button type="button" id="submitForm">Submit</button> </form> <div id="result"></div> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script>