JezK
Edit File: registration.php
<?php include_once("app/adminObj.php"); include_once("app/checkSession.php"); $countryList=$customerObj->getCountryList(); $optionData=''; foreach($countryList as $val) { $optionData.= '<option value='.$val['country_id'].'>'.$val['country_name'].'</option>'; } ?> <!DOCTYPE html> <html lang="en" class="h-100"> <head> <title>Uflexit</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/registration.css"> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body class="signup h-100"> <div class="container-fluid"> <div class="row h-100"> <div class="col-md-6 p-0 h-100"> <div class="img-div h-100"><img src="images/Customer_croppings/shutterstock2.png" class="login-bg m-0"></div> <img src="images/Customer_croppings/loginlogo.png" class="logo-cls"> <!-- <p class="login-bg m-0"></p> --> </div> <!--form --> <div class="col-md-6 h-100 bg-white "> <div class="justify-content-center h-100 d-md-flex flex-column"> <div class="row"> <a class="text-right w-100 text-clr pr-md-4" href="login.php" id="rlog">Business Login</a> </div> <div class="row d-flex justify-content-between mt-2" id="owndiv"> <!-- <div class="col-md-2 col-2"> <img src=""> </div>--> <div class="row mt-3 w-100"> <p class="text-center w-100 text-clr-blue" id="reg">Business Registration</p> </div> </div> <script type="text/javascript"> </script> <!-- button --> <div class="row d-flex justify-content-center"> <div class="col-md-12 col-12 d-flex justify-content-center"> <ul class="nav nav-tabs"> <li class="nav-item"> <a id="od1" class="nav-link b-customer active" data-toggle="tab" href="#owner"><span class="pr-2"><img src="images/owner_select.png" alt="Business"></span>Business</a> </li> <li class="nav-item"> <a id="od2" class="nav-link i-customer" data-toggle="tab" href="#customer"><span class="pr-2"><img src="images/customer_ubselect.png" alt="Individual"></span>Individual</a> </li> </ul> </div> </div> <!-- button --> <!-- tab content --> <div class="tab-content"> <!-- bussiness form --> <div id="owner" class="container tab-pane active"> <?php echo $customerObj->flashMessage();?><br> <form class="form" action="app/registeration.php" method="post" enctype="multipart/form-data"> <div class="row d-flex justify-content-center"> <!-- First row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputware" class="inpt-label">Company Name</label> <div class="input-container"> <input type="text" id="company_name" name="company_name" value="" class="form-control frm-input" placeholder="Company Name" onchange="return checkExistsOrNot(this.value,'1');"> </div> <div class="error company_name_error"></div> </div> <div class="col-md-6"> <label for="inputware1" class="inpt-label">First Name</label> <div class="input-container"> <input type="text" id="first_name" name="first_name" value="" class="form-control frm-input" placeholder="First Name" > </div> <div class="error first_name_error"></div> </div> </div> <!-- First row --> <!-- Second row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputware1" class="inpt-label">Last Name</label> <div class="input-container"> <input type="text" id="last_name" name="last_name" value="" class="form-control frm-input" placeholder="Last Name" > </div> <div class="error last_name_error"></div> </div> <div class="col-md-6"> <label for="inputAddress" class="inpt-label">Designation</label> <div class="input-container"> <input type="text" id="designation" name="designation" value="" class="form-control frm-input" placeholder="Designation" > </div> <div class="error designation_error"></div> </div> </div> <!-- Second row --> <!-- Third row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputCity" class="inpt-label">Email</label> <div class="input-container"> <input type="email" id="email" name="email" value="" class="form-control frm-input" placeholder="Enter Email Address" onblur="return checkExistsOrNotreg1(this.value,'2');"> </div> <div class="email_error" style="color: #F00;"></div> </div> <div class="col-md-6 "> <label for="inputEmail" class="inpt-label">Password</label> <div class="input-container"> <input type="password" name="password" class="form-control frm-input" placeholder="Enter Password" value="" id="password"> <i class="fa fa-eye icon icon-display" id="togglePassword"></i> </div> <div class="error password_error"></div> </div> </div> <!-- Third row --> <!-- Fourth row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6"> <label for="inputLocation" class="inpt-label">Select Country</label> <div class="input-container"> <select id="country" name="country" class="form-control frm-input" onchange="getcity(this.value);">> <!--<option value="">Select country</option>--> <?= $optionData;?> </select> <!-- <input type="text" id="location" name="location" value="" class="form-control frm-input" placeholder="Location" > --> <!-- <i class="fa fa-map-marker icon icon-display" id="icon1"></i> --> </div> <div class="error country_error"></div> </div> <div class="col-md-6"> <label for="inputEmail" class="inpt-label">City</label> <div class="input-container"> <!-- <input type="text" id="city" name="city" value="" class="form-control frm-input" placeholder="City" > --> <select name="city" id="city" class="form-control frm-input" > <option value="">Select City</option> <?= $optionData;?> </select> </div> <div class="error city_error"></div> </div> <!-- <div class="col-md-6 marg"> <label for="inputPostalCode" class="inpt-label">Postal Code</label> <div class="input-container"> <input id="zip" name="zip" type="text" onkeypress="return checkPhone(event)" class="form-control frm-input" placeholder="Postal Code"> </div> <div class="error postal_code_error"></div> </div> --> </div> <!-- Fourth row --> <!-- Fifth row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputPhone" class="inpt-label">Phone Number</label> <div class="input-container"> <input type="text" name="mobile_number" class="form-control frm-input" value="" placeholder="Phone Number" id="mobile_number" onchange="return checkExistsOrNotreg(this.value,'3');" onkeypress="return checkPhone(event)"> </div> <div class="error mobile_number_error"></div> </div> <div class="col-md-6"> <label for="inputEmail" class="inpt-label">Address</label> <div class="input-container"> <input type="text" id="address" name="address" value="" class="form-control frm-input" placeholder="Address"> </div> <div class="error address_error"></div> </div> </div> <!-- Fifth row --> <!---sixth row---> <!-- <div class="row d-flex justify-content-around w-100 mb-4"> <div class="col-md-6 marg"> <label for="inputEmail" class="inpt-label">Address</label> <div class="input-container"> <input type="text" id="address" name="address" value="" class="form-control frm-input" placeholder="Address"> </div> <div class="error address_error"></div> </div> <div class="col-md-6"> </div> </div> --> <div class="row d-flex justify-content-around w-100 mb-1"> <div class="col-md-12 mb-1 pr-0 py-2"> <input type="submit" name="uflexitBusinessRegister" value="Register" class="btn btn-primary w-100 btn-login py-2" onclick="return regBusinessValidations();"/> </div> </div> </div> </form> </div> <!-- Owner form --> <!-- customer form --> <div id="customer" class="container tab-pane"><br> <form class="form" action="app/registeration.php" method="post" > <div class="row d-flex justify-content-center"> <!-- First row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputware1" class="inpt-label">First Name</label> <div class="input-container"> <input type="text" id="customer_first_name" name="first_name" value="" class="form-control frm-input" placeholder="First Name" > </div> <div class="error first_name_error1"></div> </div> <div class="col-md-6"> <label for="inputware1" class="inpt-label">Last Name</label> <div class="input-container"> <input type="text" id="customer_last_name" name="last_name" value="" class="form-control frm-input" placeholder="Last Name" > </div> <div class="error last_name_error1"></div> </div> </div> <!-- First row --> <!-- Second row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputCity" class="inpt-label">Email</label> <div class="input-container"> <input type="email" id="customer_email" name="email" value="" class="form-control frm-input" placeholder="Enter Email Address " autocomplete="off" onchange="return checkExistsOrNotin(this.value,'5');"> </div> <div class="email_error1" style="color: #F00;"></div> </div> <div class="col-md-6 "> <label for="inputEmail" class="inpt-label">Password</label> <div class="input-container"> <input type="password" name="password" class="form-control frm-input" placeholder="Enter Password" value="" id="customerPassword"> <i class="fa fa-eye icon icon-display" id="togglePassword2"></i> </div> <div class="error password_error1"></div> </div> </div> <!-- Second row --> <!-- Third row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputPhone" class="inpt-label">Phone Number</label> <div class="input-container"> <input type="text" name="mobile_number" class="form-control frm-input" value="" placeholder="Phone Number" id="customer_mobile_number" onblur="return checkExistsOrNotregcus(this.value,'3');" autocomplete="off" onkeypress="return checkPhone(event)"> </div> <div class="error mobile_number_error1"></div> </div> <div class="col-md-6"> <label for="inputEmail" class="inpt-label">Address</label> <div class="input-container"> <input type="text" id="customer_address" name="address" value="" class="form-control frm-input" placeholder="Address"> </div> <div class="error address_error1"></div> </div> </div> <!-- Third row --> <!--Fourth row--> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-6 marg"> <label for="inputEmail" class="inpt-label">Country</label> <div class="input-container"> <input type="text" id="customer_location" name="location" value="" class="form-control frm-input" placeholder="Country"> </div> <div class="error location_error1"></div> </div> <div class="col-md-6"> <label for="inputEmail" class="inpt-label">City</label> <div class="input-container"> <input type="text" id="customer_city" name="city" value="" class="form-control frm-input" placeholder="City" > </div> <div class="error city_error1"></div> </div> </div> <!--Fourth row--> <div class="row d-flex justify-content-around w-100 mb-1"> <div class="col-md-12 mb-1 mt-4 pr-0 py-2"> <input type="submit" id="submit" name="uflexitUserRegister" value="Register" class="btn btn-primary w-100 btn-login py-2" onclick="return regValidationsCustomer();"/> </div> </div> </div> </form> </div> <!-- customer form --> </div> <!-- tab content --> </div> <!-- Form --> </div> </div> </div> </body> </html> <?php include_once("scriptsLinks.php");?> <script> const togglePassword = document.querySelector('#togglePassword'); const password = document.querySelector('#password'); const togglePassword2 = document.querySelector('#togglePassword2'); const password2= document.querySelector('#customerPassword'); togglePassword.addEventListener('click', function (e) { // toggle the type attribute const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // toggle the eye slash icon this.classList.toggle('fa-eye-slash'); }); togglePassword2.addEventListener('click', function (e) { // toggle the type attribute const type = password2.getAttribute('type') === 'password' ? 'text' : 'password'; password2.setAttribute('type', type); // toggle the eye slash icon this.classList.toggle('fa-eye-slash'); }); $(".nav-link" ).click(function() { if ($('.b-customer').hasClass('active')) { $('.b-customer img').attr('src','images/owner_unselect.png'); $('.i-customer img').attr('src','images/customer_select.png'); } else { $('.b-customer img').attr('src','images/owner_select.png'); $('.i-customer img').attr('src','images/customer_ubselect.png'); } }); $("#od1" ).click(function() { $("#reg").html("Business Registration"); $("#rlog").html("Business Login"); }) $("#od2" ).click(function() { $("#reg").html("Individual Registration"); $("#rlog").html("Individual Login"); }) function getcity(country_id){ //alert(country_id); // var state_v = $("#states option:selected").val(); // alert(state_v); jQuery.ajax({ type: "POST", url: 'http://uflexit.krify.com/ajax.php', data: ({action:'get_cities',country_id:country_id}), success: function(data) { jQuery('#city').html(data); } }); } </script>