Untitled

$(document).ready(function () {
    // Populate country dropdown
    var countries = ["United States", "Canada", "United Kingdom", "Australia", "India", "Germany", "France"];
    for (var i = 0; i < countries.length; i++) {
        $("#country").append("<option value='" + countries[i] + "'>" + countries[i] + "</option>");
    }

    // Auto-calculate age and show/hide Guardian field
    $("#birthdate").change(function () {
        var birthDate = new Date($(this).val());
        var today = new Date();
        var age = today.getFullYear() - birthDate.getFullYear();
        if (today < new Date(birthDate.setFullYear(today.getFullYear()))) {
            age--;
        }
        $("#age").val(age);

        if (age < 18) {
            $("#guardianField").show();
        } else {
            $("#guardianField").hide();
        }
    });

    // Show/hide Other Gender field
    $("input[name='gender']").change(function () {
        if ($("input[name='gender']:checked").val() === "Other") {
            $("#otherGenderField").show();
        } else {
            $("#otherGenderField").hide();
        }
    });

    // Form validation and submission
    $("#registrationForm").submit(function (e) {
        e.preventDefault();
        var isValid = this.checkValidity();

        if (isValid) {
            var formData = "<strong>Full Name:</strong> " + $("#fullName").val() + "<br>" +
                "<strong>Birthdate:</strong> " + $("#birthdate").val() + "<br>" +
                "<strong>Age:</strong> " + $("#age").val() + "<br>" +
                "<strong>Guardian Name:</strong> " + ($("#guardianName").val() || "N/A") + "<br>" +
                "<strong>Gender:</strong> " + $("input[name='gender']:checked").val() + "<br>" +
                "<strong>Email:</strong> " + $("#email").val() + "<br>" +
                "<strong>Contact:</strong> " + $("#contact").val() + "<br>" +
                "<strong>Address:</strong> " + $("#address").val() + "<br>" +
                "<strong>Country:</strong> " + $("#country").val() + "<br>" +
                "<strong>Bio:</strong> " + $("#bio").val();

            $("#displayData").html(formData);
            $("#bioDetails").show();
        }
        this.classList.add("was-validated");
    });
});