JezK

Edit File: summer-info.php

<?php

session_start();

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

if (isset($_SESSION['registrationFail'])) {
    echo "<script>alert('Registration Failed')</script>";
    unset($_SESSION['registrationFail']);
}

<!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>Summer Internship</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>

input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px #39459B inset !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: 12px solid #ffffff;
            background-color: #ffffff;
        }

.mui-textfield--float-label>label {
            color: rgb(43 105 181);
        }

.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: rgb(43 105 181) !important;
            font-weight: 100;
        }

.subBt {
            border: 2px solid #3286c9 !important;
            color: rgb(48 128 195) !important;
            font-size: 15px;
            text-transform: uppercase;
            padding: 8px 4rem;
            border-radius: 3px;
            background-color: transparent;
        }

.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;
        }

/* Style for input[type="number"] */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            /* Remove default arrow marks */
            appearance: none;
            margin: 0;
            /* Optional: You might want to remove the margin as well */
        }

</style>
</head>

<body id="page-top" class="index">
    Step2:
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            
            <div class="logo">
                <a class="navbar-brand navbar-brand-cstm" href="index.php"> <img src="images/logo.png" class="logres">
                </a>
            </div>
        </div>
        </div>
    </nav>
    
    <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="summerInternsForm">
                        <h5 style="text-align: center">Student Information</h5>
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="50" name="studentname" id="studentname" autocomplete="off">
                            <label>Student Name*</label>
                        </div>
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" name="dob" id="dob" autocomplete="off">
                            <label>Date of Birth*</label>
                        </div>

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

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

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

<div class="mui-textfield mui-textfield--float-label col-md-12" id="areas">
                            <label>Area of Interest*</label>
                            <br>
                        </div>
                        <?php
                        foreach ($result as $row) { ?>
                            <input type="radio" id="Interest<?php echo $row['id']; ?>" name="interest" value="<?php echo $row['id']; ?>">
                            <label for="Interest<?php echo $row['id']; ?>" id="add_color"> <?php echo $row['name']; ?></label><br>
                        <?php } ?>

<h5 style="text-align: center">Parental Information</h5>
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="50" name="fatherName" id="fatherName" autocomplete="off">
                            <label>Father's Name*</label>
                        </div>
                        <div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="number" maxlength="10" name="fatherMobile" id="fatherMobile" autocomplete="off">
                            <label>Father's 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>Father's Email</label>
                        </div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="text" maxlength="50" name="motherName" id="motherName" autocomplete="off">
                            <label>Mother's Name*</label>
                        </div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
                            <input type="number" maxlength="50" name="motherMobile" id="motherMobile" autocomplete="off">
                            <label>Mother's Mobile*</label>
                        </div>

</body>

$.ajax({
            url: 'app/summerInterns.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('summer-internship.php');
                }
            }

})

})
</script>

</html>