JezK
Edit File: registration.php
<?php include_once("app/adminObj.php"); include_once("app/checkSession.php"); $countryList = $customerObj->getCountryList(); $optionData=''; // print_r($countryList);exit; foreach($countryList as $val) { $optionData.= '<option class="text-capitalize" value='.$val['country_id'].' class="text-capitalize">'.$val['display_name'].'</option>'; } $id =1; if (isset($_REQUEST['id'])) { $id=$_REQUEST['id']; } ?> <!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="icon" href="images/fav.png" type="image/gif" sizes="16x16"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500&display=swap" rel="stylesheet"> <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-auto d-md-flex flex-column"> <div class="row"> <a class="text-right w-100 text-clr pr-md-4 pr-2 font-BAHNSCHRIFT" href="login.php" id="rlog">Business Login</a> </div> <div class="row" > <a class="text-right w-100 text-clr pr-md-4 pr-2 font-BAHNSCHRIFT" href="login.php?id=2" id="flog">Indvidual 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 regLabel"> <p class="text-center w-100 text-clr-blue font-BAHNSCHRIFT" 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 <?php if($id!=2){echo "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 <?php if($id==2){echo "active"; } ?> " 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 <?php if($id!=2){echo "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" onkeyup="return checkLength(this.value,'2');" > </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" onkeyup="return checkLength(this.value,'3');"> </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" onchange="return checkExistsOrNotreg1(this.value,'2');" /> </div> <div class="error 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-slash 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</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="inputEmaill" 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> </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-3 marg"> <label for="inputPhone" class="inpt-label">Country Code</label> <div id="countrycode"> <div class="input-container form-control drop-down"> <select id="mobile_country_code" name="mobile_country_code" class="form-control frm-input"> <option value=""></option> <option value="966" class="en" style="background-image:url('images/saudiarabia.png');background-size: 45px 20px;">+966</option> <option value="971" class="en" style="background-image:url('images/uae.png');background-size: 45px 20px;">+971</option> <option value="962" class="en" style="background-image:url('images/jordan.png');background-size: 45px 20px;">+962</option> </select> <input type="hidden" name="mobile_country_code" value="" id="mobile_country_code hidden"> </div> </div> </div> <div class="col-md-3 marg"> <label for="inputPhone" class="inpt-label numberLabel" >Phone Number</label> <div class="input-container shadow-none pr-md-2"> <input type="text" name="mobile_number" class="form-control frm-input numberInput" 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="postalcode1" class="inpt-label">Postal code(optional)</label> <div class="input-container"> <input type="text" id="postalcode1" name="postalcode1" value="" class="form-control frm-input" placeholder="Postal Code"> </div> <div class="error postal_code_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 <?php if($id==2){echo "active"; } ?>"><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="customer_first_name" value="" class="form-control frm-input" placeholder="First Name" onkeyup="return checkLength(this.value,'2');" > </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="customer_last_name" value="" class="form-control frm-input" placeholder="Last Name" onkeyup="return checkLength(this.value,'3');" > </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="error 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="customerPassword" class="form-control frm-input" placeholder="Enter Password" value="" id="customerPassword"> <i class="fa fa-eye-slash 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="inputSelectCountry" class="inpt-label">Select Country</label> <div class="input-container"> <select id="customer_location" name="customer_location" class="form-control frm-input" onchange="getcustomercity(this.value);"> <option value="">Select</option> <?= $optionData;?> </select> </div> <div class="error location_error1"></div> </div> <div class="col-md-6"> <label for="customer_city" class="inpt-label">City</label> <div class="input-container"> <select name="customer_city" id="customer_city" class="form-control frm-input" > <option value="">Select City</option> </select> </div> <div class="error city_error1"></div> </div> </div> <!--Third row--> <!-- Fourth row --> <div class="row d-flex justify-content-around w-100 mb-2"> <div class="col-md-3 marg"> <label for="inputCountryCode" class="inpt-label">Country Code</label> <div id="customercountrycode"> <div class="input-container form-control drop-down"> <select id="mobile_country_code1" name="mobile_country_code1" class="form-control frm-input"> <option value="">Select</option> <option value="966" class="en" style="background-image:url('images/saudiarabia.png');background-size: 45px 20px;">+966</option> <option value="971" class="en" style="background-image:url('images/uae.png');background-size: 45px 20px;">+971</option> <option value="962" class="en" style="background-image:url('images/jordan.png');background-size: 45px 20px;">+962</option> </select> <input type="hidden" name="mobile_country_code1" value="" id="mobile_country_code1 hidden"> </div> </div> </div> <div class="col-md-3 marg"> <label for="inputPhone" class="inpt-label numberLabel" >Phone Number</label> <div class="input-container shadow-none pr-md-2"> <input type="text" name="customer_mobile_number" class="form-control frm-input numberInput" value="" placeholder="Phone Number" id="customer_mobile_number" onchange="return checkExistsOrNotreg(this.value,'9');" 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="customer_address" value="" class="form-control frm-input" placeholder="Address"> </div> <div class="error address_error1"></div> </div> </div> <!-- Fourth row --> <!-- Fifth row --> <div class="row d-flex justify-content-around w-100 mb-4"> <div class="col-md-6 marg"> <label for="postalcode" class="inpt-label">Postal code(optional)</label> <div class="input-container"> <input type="text" id="postalcode" name="postalcode" value="" class="form-control frm-input" placeholder="Postal Code"> </div> <div class="error zip_error"></div> </div> <div class="col-md-6"> </div> </div> <!-- Fifth 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> $(document).ready(function(){ var params = new window.URLSearchParams(window.location.search); var id=params.get('id') if(id==2){ $("#reg").html("Individual Registration"); $("#flog").html("Individual Login"); $('.b-customer img').attr('src','images/Business.png'); $('.i-customer img').attr('src','images/Individual-selected.png'); $("#flog").css("display", "block"); $("#rlog").css("display", "none"); }else{ $("#reg").html("Business Registration"); $("#rlog").html("Business Login"); $('.b-customer img').attr('src','images/Business_select.png'); $('.i-customer img').attr('src','images/Individual.png'); $("#rlog").css("display", "block"); $("#flog").css("display", "none"); } }); $(document).on('click', '#togglePassword', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#password"); input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password') }); $(document).on('click', '#togglePassword2', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#customerPassword"); input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password') }); $(".nav-link" ).click(function() { if ($('.b-customer').hasClass('active')) { $('.b-customer img').attr('src','images/Business.png'); $('.i-customer img').attr('src','images/Individual-selected.png'); $("#rlog").css("display", "none"); $("#flog").css("display", "block"); } else { $('.b-customer img').attr('src','images/Business_select.png'); $('.i-customer img').attr('src','images/Individual.png'); $("#flog").css("display", "none"); $("#rlog").css("display", "block"); } }); $("#od1" ).click(function() { $("#reg").html("Business Registration"); $("#rlog").html("Business Login"); }) $("#od2" ).click(function() { $("#reg").html("Individual Registration"); $("#flog").html("Individual Login"); }) function getcity(country_id){ //alert(country_id); // var state_v = $("#states option:selected").val(); // alert(state_v); if(country_id==1) { // $('.button span').css('display','block'); $('#countrycode .button span').html('+966'); $('#countrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/saudi arabia.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code').val('+966'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='966']").attr("selected", "selected"); // $("#mobile_country_code ").attr('data-img-src'); } else if(country_id==2) { $('#countrycode .button span').html('+971'); $('#countrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/uae.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code').val('+971'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='971']").attr("selected", "selected"); } else if(country_id==3) { $('#countrycode .button span').html('+962'); $('#countrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/jordan.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code').val('+962'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='962']").attr("selected", "selected"); } jQuery.ajax({ type: "POST", url: './ajax.php', data: ({action:'get_cities',country_id:country_id}), success: function(data) { jQuery('#city').html(data); } }); } function getcustomercity(country_id){ //alert(country_id); // var state_v = $("#states option:selected").val(); // alert(state_v); if(country_id==1) { // $('.button span').css('display','block'); $('#customercountrycode .button span').html('+966'); $('#customercountrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/saudi arabia.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code1').val('+966'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='966']").attr("selected", "selected"); // $("#mobile_country_code ").attr('data-img-src'); } else if(country_id==2) { $('#customercountrycode .button span').html('+971'); $('#customercountrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/uae.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code1').val('+971'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='971']").attr("selected", "selected"); } else if(country_id==3) { $('#customercountrycode .button span').html('+962'); $('#customercountrycode .button span').css('background-image','url("http://uflexit.krify.com/uflexit-local/images/jordan.png")'); $('.button span').css('padding','0 22px'); $('#mobile_country_code1').val('+962'); // $('#mobile_country_code option:selected').removeAttr('selected'); // $("#mobile_country_code option[value='962']").attr("selected", "selected"); } jQuery.ajax({ type: "POST", url: './ajax.php', data: ({action:'get_cities_list',country_id:country_id}), success: function(data) { jQuery('#customer_city').html(data); } }); } // $(document).ready(function(){ // if($(".b-customer").hasClass('active')) // { // $("#flog").css("display", "none") // } // else{ // $("#rlog").css("display", "none");; // } // if ($('.b-customer').hasClass('active')) { // $('.b-customer img').attr('src','images/Business_select.png'); // $('.i-customer img').attr('src','images/Individual.png'); // $("#rlog").css("display", "none"); // $("#flog").css("display", "block"); // } // else // { // $('.b-customer img').attr('src','images/Business.png'); // $('.i-customer img').attr('src','images/Individual-selected.png'); // $("#flog").css("display", "none"); // $("#rlog").css("display", "block"); // } // }) jQuery().ready(function() { /* Custom select design */ jQuery('.drop-down').append('<div class="button"></div>'); jQuery('.drop-down').append('<ul class="select-list"></ul>'); jQuery('.drop-down select option').each(function() { var bg = jQuery(this).css('background-image'); jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>'); }); jQuery('.drop-down .button').html('<span style=background-image: ' + jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link"></a>'); jQuery('.drop-down ul li').each(function() { if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) { jQuery(this).addClass('active'); } }); jQuery('.drop-down .select-list span').on('click', function() { var dd_text = jQuery(this).text(); var dd_img = jQuery(this).css('background-image'); var dd_val = jQuery(this).attr('value'); jQuery('.drop-down .button').html('<span style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link"></a>'); jQuery('.drop-down .select-list span').parent().removeClass('active'); jQuery(this).parent().addClass('active'); $('.drop-down select[name=options]').val( dd_val ); $('.drop-down .select-list li').slideUp(); }); jQuery('.drop-down .button').on('click','a.select-list-link', function() { jQuery('.drop-down ul li').slideToggle(); }); /* End */ }); </script> <style> body{ font-family: 'Barlow', sans-serif; } input, select, textarea{ height:40px; font-family: 'Barlow', sans-serif !important; font-size:unset !important; } .drop-down { position: relative; display: inline-block; width: auto; margin-top: 0; font-family: 'Barlow', sans-serif; } .drop-down select { display: none; } .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #595959; list-style:none; } .drop-down .select-list li { display: none; } .drop-down .select-list li span { display: inline-block; min-height: 40px; min-width: 280px; width: 100%; padding: 5px 15px 5px 35px; background-color: white; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: black; opacity: 0.7; box-sizing: border-box; } .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; } span.en { background-size: 20px 25px; } .button span{ background-repeat: no-repeat; background-size: 20px; padding: 0px 0px; border-radius: 5px; } .input-container{ /* box-shadow: inset 0 0 3px #c5c5c5; */ } </style>