ok
Mini Shell
<?php include 'header.php' ?>
<!-- Page Banner Start -->
<div class="section page-banner-section" style="background-image: url(assets/images/bg/page-banner.jpg);margin-top: 15%;min-height: 130px;">
<div class="container">
<div class="page-banner-wrap">
<div class="row">
<div class="col-lg-12">
<!-- Page Banner Content Start -->
<div class="page-banner text-center" style="margin-top: -8%;">
<h2 class="title" style="color: #f17a28;">Application Form</h2>
<ul class="breadcrumb justify-content-center">
<li class="breadcrumb-item" style="color: #2e3092;"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active" aria-current="page" style="color: #2e3092;">Application Forms</li>
</ul>
</div>
<!-- Page Banner Content End -->
</div>
</div>
</div>
</div>
</div>
<!-- Page Banner End -->
<!-- Contact Start -->
<div class="section contact-section section-padding" style="padding-top: 50px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 style="color: #2e3092;text-align: center;">MEMBERSHIP FORM</h2>
<!-- Contact Form Wrap Start -->
<div id="content-div" class="contact-form-wrap">
<form action="" method="POST" id="member_regitration">
<div class="row">
<div class="col-md-6">
<div class="single-form">
<label>Name: <span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="name" placeholder="Your Name" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Father's Name: <span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="father_name" placeholder="Your Father's Name" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Present Address:<span style="color:red;" >*</span></label>
<textarea class="form-control" name="present_address" placeholder="Enter Present Address" required></textarea>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Permanent Address:<span style="color:red;" >*</span></label>
<textarea class="form-control" name="permanent_address" placeholder="Enter Permanent Address" required></textarea>
</div>
</div>
<div class="col-md-2">
<div class="single-form">
<label>Country Code:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" value="" name="country_code" placeholder="Enter Country Code" required>
</div>
</div>
<div class="col-md-4">
<div class="single-form">
<label>Phone/Mobile No:<span style="color:red;" >*</span></label>
<input class="form-control" type="number" value="" name="mobile" placeholder="Your Mobile No" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Email:<span style="color:red;" >*</span></label>
<input class="form-control" type="email" name="email" placeholder="Your Email" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Educational Qualification:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="education" placeholder="Your Qualification" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Profession or Business:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="profession" placeholder="Profession" required>
</div>
</div>
<div class="col-md-3">
<div class="single-form">
<label>Training Period From:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="training" placeholder="From Training Period" required>
</div>
</div>
<div class="col-md-3">
<div class="single-form">
<label>Training Period to:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="training_to" placeholder="To Training Period" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Trade:<span style="color:red;" >*</span></label>
<input class="form-control" type="text" name="trade" placeholder="Your Trade" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Password:<span style="color:red;" >*</span></label>
<input class="form-control" id="password" type="passwrod" name="password" placeholder="Your Password" required>
</div>
</div>
<div class="col-md-6">
<div class="single-form">
<label>Confirm Passowrd:<span style="color:red;" >*</span></label>
<input class="form-control" onkeyup="confirmPassword()" type="password" id="confirm_password" name="connfirm_password" placeholder="Your Confirm Password" required>
<span style="color:red;" id="password_error"></span>
</div>
</div>
<div class="col-md-6" style="margin-top: 2%;">
<h4>Types of Membership:<span style="color:red;" >*</span></h4>
<div class="single-form" style="display: flex;">
<?php foreach($membership_results as $membership){ ?>
<input type="radio" id="annual" name="member_ship" value="<?=$membership['id']?>" required>
<label for="annual" style="padding: 5px;margin-top: 2%;padding-right: 5%;">
<?=$membership['name']?> (<b><i class="fa fa-inr"></i> <?=$membership['amount']?></b>)
</label>
<?php } ?>
</div>
</div>
<div class="col-md-12" style="margin-top: 2%;">
<h2 style="text-align: center;">Declaration : <span style="color:red;" >*</span></h2>
<div class="single-form" style="display: flex;margin-top: 0px;">
<input type="checkbox" id="condition" name="condition" value="Accept" required>
<p for="" style="margin-top: 25px;margin-left: 1%;line-height: 25px;">
I hereby declare that the above mentioned details
are true and correct to the best of my knowledge. I accept the all terms & conditions of <br>
<span style="color: #f17d2d;font-weight: 800;">SALEM GOVT. I.TI. ALUMNI ASSOCIATION</span> at time to time.
</p>
</div>
</div>
<div class="col-md-12">
<div class="form-btn">
<button class="btn" name="submit_form" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div id="loading-div" class="contact-form-wrap">
<h2 style="color: #2e3092;text-align: center;">Loading..</h2>
</div>
<!-- Contact Form Wrap End -->
</div>
</div>
</div>
</div>
<!-- Contact End -->
<!-- Contact Map Start -->
<!--<div class="section contact-map-section">
<div class="contact-map-wrap">
<iframe id="gmap_canvas" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3907.0526080363265!2d78.160305588855!3d11.690684200000014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3babf1071ccac523%3A0x1419eb7ced5d97ae!2sGovernment%20Industrial%20Training%20Institute!5e0!3m2!1sen!2sin!4v1695996873885!5m2!1sen!2sin" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>-->
<!-- Contact Map End -->
<?php include 'footer.php' ?>
<script>
$(document).ready(function(){
$('#loading-div').hide();
$('#content-div').show();
});
$('#member_regitration').on('submit', function(e){
console.log("Click And Form Working");
e.preventDefault();
$('#loading-div').show();
$('#content-div').hide();
$('#completed-div').hide();
$('#final_submit').prop('disabled', true);
var formData = new FormData(this);
formData.append('type', 'create_member');
$.ajax({
url: 'api/add-member.php',
type: 'post',
dataType: 'json',
data: formData,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
success: function (response) {
console.log(response);
if(response['status']==200){
alert(response['message']);
$("#member_regitration").trigger("reset");
$("#done1").trigger("reset");
$('#loading-div').hide();
$('#content-div').show();
$('#completed-div').show();
window.location.href="login.php";
}else{
alert(response['message']);
$('#loading-div').hide();
$('#content-div').show();
}
}
});
});
function confirmPassword(){
$("#password_error").empty();
var password = $("#password").val();
var confirm_password = $("#confirm_password").val();
var condi ="";
if(password == confirm_password){
condi = "Password Matched";
}else{
condi = "Password not Matched";
}
$("#password_error").html(condi);
}
</script>
<script>
$(document).ready(function() {
$('input[name="mobile"]').on('input', function() {
var maxLength = 10;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().slice(0, maxLength));
}
});
$('input[name="training"]').on('input', function() {
var maxLength = 4;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().slice(0, maxLength));
}
});
$('input[name="training_to"]').on('input', function() {
var maxLength = 4;
if ($(this).val().length > maxLength) {
$(this).val($(this).val().slice(0, maxLength));
}
});
});
</script>
Zerion Mini Shell 1.0