Untitled

 avatar
unknown
plain_text
2 years ago
7.8 kB
2
Indexable
<%@page import="Models.Account"%>
<%@page import="java.sql.ResultSet"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Update Information</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                background-color: #f2f2f2;
            }

            .container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
            }

            .card {
                border-radius: 4px;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                margin-bottom: 20px;
                overflow: hidden;
            }

            .card-title {
                background-color: #2196F3;
                color: #fff;
                padding: 15px;
                margin: 0;
                font-size: 24px;
            }

            .form-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px;
                border-bottom: 1px solid #ccc;
            }

            .form-label {
                font-weight: bold;
            }

            .form-input {
                flex: 1;
                margin-left: 10px;
                padding: 8px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            .form-actions {
                padding: 15px;
                text-align: right;
            }

            .btn {
                background-color: #4CAF50;
                color: white;
                border: none;
                padding: 10px 20px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 10px 5px;
                cursor: pointer;
                border-radius: 4px;
            }

            .btn-primary {
                background-color: #2196F3;
            }

            .btn-primary:hover {
                background-color: #0b7dda;
            }
        </style>
    </head>
    <body>
        <%
            ResultSet rs = (ResultSet) request.getAttribute("rs");
            if (rs.next()) {
        %>
        <div class="container">
            <div class="card">
                <div class="card-title">Update Information</div>
                <form action="" method="post">
                    <div class="form-row">
                        <div class="form-label">Full Name:</div>
                        <input type="text" class="form-input" name="Fullname" value="<%= rs.getString("Fullname")%>" required>
                    </div>
                    <div class="form-row">
                        <div class="form-label">User Name:</div>
                        <input type="text" class="form-input" name="Username" value="<%= rs.getString("Username")%>" required>
                    </div>
                    <div class="form-row">
                        <div class="form-label">Mobile Number:</div>
                        <input type="text" class="form-input" name="Mobile_Number" value="<%= rs.getString("Mobile_Number")%>" required>
                    </div>
                    <div class="form-row">
                        <div class="form-label">Email:</div>
                        <input type="email" class="form-input" name="Email" value="<%= rs.getString("Email")%>" required>
                    </div>
                    <div class="form-row">
                        <div class="form-label">Address:</div>
                        <input type="text" class="form-input" name="Address" value="<%= rs.getString("Address")%>" required>
                    </div>
                    <div class="form-row">
                        <div class="form-label">Gender:</div>
                        <select name="slctGender" id="cars">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                     <div class="form-row">
                        <div class="form-label">Date of Birth:</div>
                        <input type="date" class="form-input" name="DoB" value="<%= rs.getDate("Birthday")%>" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary" name="btnUpdate" value="Update">Submit</button>
                    </div>
                </form>
            </div>
        </div>
        <%
            }
        %>
    </body>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                // Validate Full Name
                $('#fullname').on('input', function() {
                    var fullname = $(this).val();
                    if (fullname.length > 50) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });

                // Validate Username
                $('#username').on('input', function() {
                    var username = $(this).val();
                    if (username.length > 20) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });

                // Validate Mobile Number
                $('#mobile').on('input', function() {
                    var mobile = $(this).val();
                    if (!/^0[1-9][0-9]{8}$/.test(mobile)) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });

                // Validate Email
                $('#email').on('input', function() {
                    var email = $(this).val();
                    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });

                // Validate Address
                $('#address').on('input', function() {
                    var address = $(this).val();
                    if (address.length > 50) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });

                // Validate Date of Birth
                $('#dob').on('change', function() {
                    var dob = new Date($(this).val());
                    var now = new Date();
                    if (dob >= now) {
                        $(this).addClass('error');
                    } else {
                        $(this).removeClass('error');
                    }
                });
            });

            function validateForm() {
                var isValid = true;
                $('.form-input').each(function() {
                    if ($(this).hasClass('error')) {
                        isValid = false;
                        return false; // Stop iteration
                    }
                });
                return isValid;
            }
        </script>
</html>
Editor is loading...