JezK

Edit File: info.php

<?php

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

include("./app/admin_functions.php");
$connect = new admin();
$connect->dbconnection();
$result = $connect->getInfoStack();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Info</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/styles_slider.css">
    
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/freelancer.css" rel="stylesheet">
    <link href="css/mui.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/responsiveCarousel.min.js"></script>
    <script type="text/javascript" src="js/mui.js"></script>
    <script type="text/javascript" src ="validations.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
    <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
   
    <style>
        body {
            background-image: url(../images/AIbg.webp) !important;
            background-size: cover;
        }

input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px #0a0f1a  !important;
            -webkit-text-fill-color: white !important;
        }

input[type=checkbox],
        input[type=radio] {
            margin: 10px 13px 0;
            margin-top: 1px\9;
            line-height: normal;
        }

.div_border {
            border: 5px solid #ffffff;
            background-color: #ffffff;
        }
input[type="radio"] {
    margin: 20px !important;
}
        .mui-textfield--float-label>label {
            color: white !important;
            padding-left: 10px !important;
        }

.mui-textfield>input,
        .mui-textfield>select,
        .mui-textfield>textarea {
            background-color: transparent;
            color: rgb(52 80 163);
            border-bottom: 1px solid rgb(43 99 176);
        }

.div_border h2 {
            color: #2d71bb;
        }

input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
            -webkit-text-fill-color: #181819 !important;
        }

label#add_color {
            color: white !important;
            font-weight: 100;
            font-size: 16px !important;
        }
        p{
            color: white !important;
        }
        .listdatadiv{
            color: white !important;
        }
        .subBt {
            border: 2px solid #3286c9 !important;
            text-align: center;
           
            font-size: 18px !important;
            font-weight: bold;
            background: linear-gradient(to bottom, #ffffff, #27AAE0) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            display: inline-block !important;
            text-transform: uppercase;
        }

.example button {
            float: left;
            background-color: #4E3E55;
            color: white;
            border: none;
            box-shadow: none;
            font-size: 17px;
            font-weight: 500;
            font-weight: 600;
            border-radius: 3px;
            padding: 15px 35px;
            margin: 26px 5px 0 5px;
            cursor: pointer;
        }

.example button:focus {
            outline: none;
        }

.example button:hover {
            background-color: #33DE23;
        }

.example button:active {
            background-color: #81ccee;
        }
        .div_border {
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    margin-top: 3rem;
    background-color: #0a0f1a !important;
}
        .mui-textfield{
    width:50% !important;
}
input{
    background-color: transparent !important;
    color: white !important;
}
input::placeholder{
    color: white !important;
}
    </style>
</head>

<body id="page-top" class="index">
    
    <?php include 'header.php'; ?>
    
    <section id="aboutus" class="slider">
        <div class="container">
            <div class="row1">
                <div class="col-sm-8 col-sm-offset-2 div_border">
                    <div class="text-center">
                        <h2>Internship Registration Form</h2> <br />
                        
                    </div>
                    <form class="mui-form row" id="infoUser">
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="50" name="name" id="name" autocomplete="off">
                            <label>Name*</label>
                        </div>
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="10" name="mobile" id="mobile" autocomplete="off">
                            <label>Mobile*</label>
                        </div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="255" name="email" id="email" autocomplete="off">
                            <label>Email*</label>
                        </div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="50" name="college" id="college" autocomplete="off">
                            <label>College*</label>
                        </div>

<div class="mui-textfield mui-textfield--float-label col-md-12" id="areas">
                            <label>Area of Interest*</label>
                            <br>
                        </div>
                        <div class="row">

<?php
                        foreach ($result as $row) { ?>
                        <div class="col-md-6">
                            <input type="radio" id="Interest<?php echo $row['stack_id']; ?>" name="interest" value="<?php echo $row['stack_id']; ?>">
                            <label for="Interest<?php echo $row['stack_id']; ?>" id="add_color"> <?php echo $row['name']; ?></label>
                        </div>
                        <?php } ?>
                        </div>

$('#infoUser').submit(function(event){
        event.preventDefault();
        let formDate = $('#infoUser').serialize()

$.ajax({
            url:'app/infoUser.php',
            method:'POST',
            data:formDate,
            success:function(response){
                console.log(response)
                if(response == 0){
                    alert('Unable To Register Try Again')
                }else if(response>0){
                    alert('Registred Successfully');
                    location.replace('index.php');
                }else if(response == -1){
                    alert("You have already registered with this mobile number. Please contact 7901311111 for register in offline");
                    location.replace('index.php');
                }
            }

})

})
    
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Get the "interest" parameter from the URL
    const params = new URLSearchParams(window.location.search);
    const selectedInterest = params.get("interest");

if (selectedInterest) {
        // Find the matching radio button
        const radioButton = document.querySelector(`input[name="interest"][value="${selectedInterest}"]`);

if (radioButton) {
            radioButton.checked = true; // Select the correct radio button
            // radioButton.parentElement.style.backgroundColor = "yellow"; // Highlight the label
            // radioButton.parentElement.style.border = "2px solid red"; // Extra highlighting
        }
    }
});
</script>

</html>