JezK

Edit File: ai-engineer-registrationform.php

<!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>AI Engineer Registration</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>
	<script type='text/javascript'>
		$(function() {
			$('#date').datepicker({
				//endDate: '+0d',
				format: 'yyyy-mm-dd',
				startDate: '<?php echo date('Y-m-d') ?>',
				autoclose: true
			});
		});
	</script>
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<style>
		body {
			background-image: url(../images/AIbg.webp) !important;
			background-size: cover;
			background-repeat: no-repeat;
		}

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 {
			background-color: #ffffff;
			margin-top: 15rem !important;
			margin-bottom: 5rem !important;

}

.mui-textfield {
			width: 50% !important;
		}

.mui-textfield--float-label>label {
			color: white;
			padding-left: 10px !important;
			// font-size: 14px !important;
		}

.mui-textfield>input,
		.mui-textfield>textarea {
			background-color: transparent;
			color: white;
			border: 1px solid white;
		}

.div_border {
			box-shadow: 0px -27.2px 97.2px 0px rgba(39, 170, 224, 0.4), 0px -25.84px 95.19px 0px rgba(39, 170, 224, 0.4) !important;
		}

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

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

/* Chrome, Safari, Edge, Opera */
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

/* Firefox */
		input[type=number] {
			-moz-appearance: textfield;
		}
	</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>AI Engineer Registration Form</h2> <br />
						
					</div>
					<form class="mui-form row" id="aiForm">
						<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="number" 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="email" 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" name="address" id="address" autocomplete="off">
							<label>Address*</label>
						</div>
						<div class="mui-textfield mui-textfield--float-label col-md-12">
							<input type="text" maxlength="50" name="education" id="college" autocomplete="off">
							<label>Education*</label>
						</div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
							<input type="text" maxlength="50" name="emergName" id="emergName" autocomplete="off">
							<label>Emergency Contact Person Name*</label>
						</div>

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

<div class="mui-textfield mui-textfield--float-label col-md-12">
							<input type="number" maxlength="50" name="emergNumber" id="emergNumber" autocomplete="off">
							<label>Emergency Contact Number*</label>
						</div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
							<span style="color:white;font-size:16px;">Upload Image*</span>
							<input type="file" name="image" id="image" accept=".png, .jpg, .jpeg" style="margin-top:10px" onchange="imageValidation()">
						</div>

<div class="mui-textfield mui-textfield--float-label col-md-12">
							<span style="color:white;font-size:16px;">Upload ID Proof*</span>
							<input type="file" name="IDproof" id="IDproof" accept=".png, .jpg, .jpeg" style="margin-top:10px" onchange="imageValidation()">
						</div>

<div class="mui-textfield mui-textfield--float-label col-md-12" id="areas" style="width:100% !important">
							<label>Course Duration*</label>
							<br>
						</div>

<input type="radio" id="duration1" name="duration" value="1">
						<label for="duration1" id="add_color"> 6 Months(Preliminary AI Engineer) </label><br>

<input type="radio" id="duration2" name="duration" value="2">
						<label for="duration2" id="add_color">1 Year (Advanced AI Engineer)</label><br>

function gtag() {
			dataLayer.push(arguments);
		}
		gtag('js', new Date());
		gtag('config', 'UA-64528597-1');
	</script>
</body>

</html>
<script>
	//alert();
	function dateChange() {
		var date = document.getElementById('date');
		if (date.value != "") {
			$('#date').removeClass("mui--is-empty");
			$('#date').removeClass("mui--is-pristine");
			$('#date').addClass("mui--is-dirty");
			$('#date').addClass("mui--is-not-empty");
			$('#date').addClass(" mui--is-touched");
		}
	}

$(document).ready(function() {
		$("#date").click(function() {
			var bla = $('#txt_name').val();
			//$('#txt_name').val(bla);
			//alert(bla);
		});
	});

$('#aiForm').submit(function(event) {
		event.preventDefault();

let name = $('#name').val();

let mobile = $('#mobile').val();
		let address = $('#address').val();
		let emergNumber = $('#emergNumber').val();

let image = $('#image').val();
		let IDproof = $('#IDproof').val();

let duration = $("input[name='duration']:checked").val();

console.log(duration,'duration')

if (name == '') {
			alert('Enter Name');
			return false;
		}
		
		// Limit to exactly 10 digits
		if (mobile.length != 10) {
			alert('Mobile number must be exactly 10 digits');
			return false;
		}

if (address == '') {
			alert('Enter Address');
			return false;
		}

if (emergNumber.length != 10) {
			alert('Emergency number must be exactly 10 digits');
			return false;
		}

if (image.length === 0) {
            alert('Please upload an image.');
            return false;
        }

if (IDproof.length === 0) {
            alert('Please upload an id proof.');
            return false;
        }

if (duration == undefined) {
			alert('Select Duration');
			return false;
		}

// Create FormData object correctly
		let formData = new FormData(this);

$('#submit').prop('disabled', true);
		$.ajax({
			url: 'app/aiForm.php',
			method: 'POST',
			data: formData,
			contentType: false, // Important for file uploads
			processData: false, // Important for file uploads
			success: function(response) {
				console.log(response);
				if (response == 0) {
					alert('Unable to Register. Try Again.');
					$('#submit').prop('disabled', false);
				} else if (response > 0) {
					alert('Registered Successfully');
					location.replace('index.php');
				}
			},
			error: function(xhr, status, error) {
				console.error(xhr.responseText);
			}
		});
	});
</script>