22

✏️ Editing: index-ar.php

<!DOCTYPE html>
<html lang="ar">
<head>
  <title>ابحث عن سيارتك التالية | اوتوزون بالبيد للسيارات</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://new.autozone.com.sa/wp-content/uploads/2018/06/az-new-favicon.png" rel="icon" sizes="16x16 32x32 48x48" type="image/png">
<link href="https://new.autozone.com.sa/wp-content/uploads/2018/06/az-new-favicon.png" rel="apple-touch-icon">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo&display=swap" rel="stylesheet">
</head>

<style>

@font-face {
    font-family: 'dinregular';
    src: url('bahij_thesansarabic-plain-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body{
    font-family: 'Cairo', sans-serif;
    direction:rtl;
}

.segmentation-nav {
    display: flex;
    border-radius: 6px;
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-right: 0px;
    
}
.segmentation-nav__item {
    display: flex;
    flex-grow: 1;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.12);
    
    background-color: #fff;
    padding-left: 0;
    transition: background-color .15s;
    flex-basis: 100%;
}
.segmentation-nav__item{
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
}
.segmentation-nav__link {
    font-size: 14px;
    line-height: 22px;
    background-color: transparent;
    outline: 0;
    border: 0;
    color: rgba(0,0,0,.87);
    padding: 4px 12px;
    width: 100%;
    text-align: center;
    transition: box-shadow .15s;
}
.search-filters__range {
    display: flex;
}
.range-dropdown {
    flex: 1;
    margin-right: 16px;
}
.form-input-label, label.error {
    font-size: 16px;
    line-height: 24px;
    color: rgba(0,0,0,.87);
    display: block;
}
.form-input-label {
    margin-bottom: 4px;
}
.select {
    background-color: #fff;
    display: inline-block;
    position: relative;
    z-index: 0;
}
.input-full-width {
    width: 100%;
}
.select select {
    background-color: transparent;
    white-space: nowrap;
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 9px 48px 9px 12px;
}
.select select, input, textarea {
    font-size: 18px;
    line-height: 28px;
    border: 1px solid rgba(0,0,0,.12);
    font-weight: 400;
    transition: border .15s ease-in-out,box-shadow .15s ease-in-out;
    color: rgba(0,0,0,.87);
    vertical-align: middle;
    display: inline-block;
    border-radius: 6px;
    background-color: #fff;
    margin: 0;
}
button, select {
    text-transform: none;
}
.select select, input:not([type=checkbox]):not([type=radio]), textarea {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select:after {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23212224' stroke-width='2px' stroke='none' stroke-miterlimit='10' d='M2 7l10 10L22 7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 50%;
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    width: 48px;
    z-index: 0;
}
.select select:hover, input:hover, textarea:hover {
    border-color: rgba(0,0,0,.87);
}
.segmentation-nav__item--is-selected .segmentation-nav__link {
    background-color: #FEE4A8;
    border-radius: 45px;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px #fbb716, 0 0 0 1px #fbb716;
}
.progress {
    height: 13px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #e0e0e0;
    border-radius: 45px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar{
background-color: #fbb716;    
}
.step-process__footer {
    border-top: 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-top: 16px;
    padding-bottom: 16px;
}
.step-process-footer__cta-container {
    display: flex;
}
.step-process-footer__cta-container .btn {
    flex-basis: 50%;
}
.btn-short.btn--disabled, .btn-short.btn-secondary, .btn-short.btn-transparent, .btn-short.btn-white, .btn-short:disabled {
    padding: 9px 23px;
}
@media screen and (min-width: 1025px)
{
.step-process-footer__cta-container .btn {
    flex-basis: auto;
}
}
.btn {
    font-size: 18px;
    line-height: 30px;
    text-align: center;
    border-radius: 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 12px 32px;
    color: black;
    background-color: #fafafa;
    font-weight: 700;
    min-width: 164px;
    text-decoration: none;
    transition: background-color .15s,box-shadow .15s ease-in-out,transform .15s ease-in-out;
}
.btn-secondary {
    border: 1px solid rgba(0,0,0,.12);
    background-color: #fff;
    color: rgba(0,0,0,.87);
}
.btn-action {
    border: 1px solid rgba(0,0,0,.12);
    background-color: black;
    color: #fff;
}
.step-header__logo {
    height: 54px;
    width: 136px;
    background-image: url(http://quote.autozone.com.sa/assets/images/logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: inline-block;
    margin-bottom: 16px;
}
.step-process-footer__cta-container .btn+.btn {
    margin-right: 16px;
}
.descriptiontext{
color: rgba(0,0,0,.62);  
font-weight: 300;
    font-family: sans-serif;
}
.tab {
  display: none;
}
.switch {
    position: relative;
    width: 100%;
    outline: none;
}
.switch__checkbox{
background-color:#fff;    
}
.switch--with-icon .switch__checkbox, .switch--with-icon .switch__radio {
    align-items: flex-start;
}
.switch__checkbox, .switch__radio {
    width: 100%;
    /* height: 100%; */
}
.checkbox {
    display: inline-flex;
    align-items: center;
}
.checkbox.switch__checkbox>input[type=checkbox], .radio.switch__radio>input[type=radio] {
    position: absolute;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px\9;
    margin-left: 15px;
}
.checkbox>input[type=checkbox] {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 4px;
}
.checkbox>input[type=checkbox] {
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.switch--with-icon .switch-input {
    margin-top: 16px;
}
.switch-input {
    margin-left: 12px;
}
[type=checkbox], [type=radio] {
    box-sizing: border-box;
    padding: 0;
}
.switch--with-icon .switch-label {
    padding-left: 12px;
}
.checkbox>label {
    cursor: pointer;
}
.switch-label {
    border: 1px solid rgba(0,0,0,.12);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    width: 100%;
    /* height: 100%; */
    padding: 12px 12px 12px 40px;
    border-radius: 6px;
    color: rgba(0,0,0,.87);
    text-align: left;
    transition: border .15s ease-in,box-shadow .15s ease-in;
}
.switch-label-title {
    font-size: 18px;
    line-height: 28px;
    display: flex;
}
.list-unstyled .switch-label-title{
margin-right:25px;    
}
.switch-label-with-icon {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.switch-icon-fliessheck, .switch-icon-hatchbacks, .switch-icon-urbano {
    background-image: url(hatchback-0e79f7f6.svg);
}
.switch-icon-fliessheck, .switch-icon-pickup, .switch-icon-urbano {
    background-image: url(pickup-84d84d6c.svg);
}
.switch-icon-fliessheck, .switch-icon-mpv, .switch-icon-urbano {
    background-image: url(estate-d9d01546.svg);
}
.switch-icon-fliessheck, .switch-icon-suv, .switch-icon-urbano {
    background-image: url(suv-a6710a4a.svg);
}
.switch-icon-fliessheck, .switch-icon-sedan, .switch-icon-urbano {
    background-image: url(saloon-c0b59eb6.svg);
}
.switch-icon {
    display: block;
    min-height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    margin-top: 16px;
    margin-bottom: 16px;
    width: 100%;
}
.checkbox>input[type=checkbox]:checked {
    background-image: url(assets/checkmark.svg);
    background-size: 24px;
    background-position: 50%;
    background-color: #fbb716;
    border-color: #fbb716;
}
.float-right{
float:right;    
}
.float-right-mbl{
float:right;    
}
.progress-bar {
    float: unset;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #fbb716;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.float-right{
float:unset;    
}
.h2, h2 {
    font-size: 20px;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.float-right{
float:unset;    
}    
.h2, h2 {
    font-size: 20px;
}    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.float-right{
float:unset;    
}
.h2, h2 {
    font-size: 20px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.float-right{
float:right;    
}
    }

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.float-right{
float:right;    
}    
}
.list-unstyled {
    padding-left: 0px;
    padding-right: 0px;
    list-style: none;
}
</style>

<div class="step-header__logo-container"><a href="/" class="step-header__logo" data-mobile-app="hide"></a></div>
  
</div>     
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="progress" style="margin-top:15px;">
    <div class="progress-bar step" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%">
    </div>    
</div>
</div>
</div>
<form id="regForm" action="https://new.autozone.com.sa/vehicles/">
<div class="tab">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h2 style="font-weight:800;">ما هي ميزانيتك؟</h2>    
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 descriptiontext">
<p>    
اختر مجموعة لسيارتك الجديدة    
</p>
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-5 col-lg-5 float-right">
<ul class="segmentation-nav">
    <li onclick="iscash(this);" class="segmentation-nav__item" id="bt1">
    <button type="button" class="segmentation-nav__link">القسط الشهري</button></li>
<li onclick="iscash(this);" class="segmentation-nav__item" id="bt2">
    <button type="button" class="segmentation-nav__link">النقدية</button>
    </li></ul>
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-5 col-lg-5 float-right">
<div class="row">
<div class="col-sm-6 col-md-12 col-lg-12">     
<div class="search-filters__range" id="installment"><div class="range-dropdown"><label><span class="form-input-label">الحد الأدنى للدفع</span><div class="select input-full-width"><select><option value="0">أي</option><option value="1">SAR500</option><option value="2">SAR600</option><option value="3">SAR700</option><option value="4">SAR800</option><option value="5">SAR1000</option><option value="6">SAR1500</option><option value="7">SAR2000</option></select></div></label></div><div class="range-dropdown"><label><span class="form-input-label">الحد الأقصى للدفع</span><div class="select input-full-width"><select class="required"><option value="1">SAR500</option><option value="2">SAR600</option><option value="3">SAR700</option><option value="4">SAR800</option><option value="5">SAR1000</option><option value="6">SAR1500</option><option value="7">SAR2000</option><option value="8">SAR2500</option><option value="9">SAR3000</option><option value="10">SAR3500</option><option value="11">SAR4000</option><option value="12">SAR4500</option><option value="13">SAR5000</option><option value="14">SAR5500</option><option value="15">SAR6,000</option><option value="16">SAR6,500</option><option value="17">SAR7,000</option><option value="18">SAR7,500</option><option value="19">SAR8,000</option><option value="20">SAR8,500</option><option value="21">SAR9,000</option></select></div></label></div></div>

<div class="search-filters__range" id="cash" style="display:none;"><div class="range-dropdown"><label><span class="form-input-label">سعر الحد الأدنى</span><div class="select input-full-width"><select><option value="0">Any</option><option value="1">SAR500</option><option value="2">SAR600</option><option value="3">SAR700</option><option value="4">SAR800</option><option value="5">SAR1000</option><option value="6">SAR1500</option><option value="7">SAR2000</option></select></div></label></div><div class="range-dropdown"><label><span class="form-input-label">السعر الأقصى</span><div class="select input-full-width"><select class="required"><option value="1">SAR500</option><option value="2">SAR600</option><option value="3">SAR700</option><option value="4">SAR800</option><option value="5">SAR1000</option><option value="6">SAR1500</option><option value="7">SAR2000</option><option value="8">SAR2500</option><option value="9">SAR3000</option><option value="10">SAR3500</option><option value="11">SAR4000</option><option value="12">SAR4500</option><option value="13">SAR5000</option><option value="14">SAR5500</option><option value="15">SAR6,000</option><option value="16">SAR6,500</option><option value="17">SAR7,000</option><option value="18">SAR7,500</option><option value="19">SAR8,000</option><option value="20">SAR8,500</option><option value="21">SAR9,000</option></select></div></label></div></div>
</div>
</div>
</div>
</div>
</div> 
<div class="tab">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h2 style="font-weight:800;">ما أنواع الأجسام التي قد تفكر فيها لسيارتك الجديدة؟</h2>    
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 descriptiontext">
<p>    
اختيار العديد كما تريد    
</p>
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="switch switch--with-icon"><div class="checkbox switch__checkbox"><input class="switch-input" id="body_type__hatchbacks" name="body_type__hatchbacks" type="checkbox" value="hatchbacks"><label class="switch-label" for="body_type__hatchbacks" data-interaction-element="Switch" data-interaction-type="hatchbacks"><span class="switch-label-title"><span class="switch-label-with-icon"><span class="switch-icon switch-icon-hatchbacks"></span>هاتشباك</span></span></label></div></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="switch switch--with-icon"><div class="checkbox switch__checkbox"><input class="switch-input" id="body_type__sedan" name="body_type__sedan" type="checkbox" value="sedan"><label class="switch-label" for="body_type__sedan" data-interaction-element="Switch" data-interaction-type="sedan"><span class="switch-label-title"><span class="switch-label-with-icon"><span class="switch-icon switch-icon-sedan"></span>سيدان</span></span></label></div></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="switch switch--with-icon"><div class="checkbox switch__checkbox"><input class="switch-input" id="body_type__suv" name="body_type__suv" type="checkbox" value="suv"><label class="switch-label" for="body_type__suv" data-interaction-element="Switch" data-interaction-type="suv"><span class="switch-label-title"><span class="switch-label-with-icon"><span class="switch-icon switch-icon-suv"></span>سيارة العائلة</span></span></label></div></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="switch switch--with-icon"><div class="checkbox switch__checkbox"><input class="switch-input" id="body_type__mpv" name="body_type__mpv" type="checkbox" value="mpv"><label class="switch-label" for="body_type__mpv" data-interaction-element="Switch" data-interaction-type="mpv"><span class="switch-label-title"><span class="switch-label-with-icon"><span class="switch-icon switch-icon-mpv"></span>ميني فان</span></span></label></div></div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<div class="switch switch--with-icon"><div class="checkbox switch__checkbox"><input class="switch-input" id="body_type__pickup" name="body_type__pickup" type="checkbox" value="pickup"><label class="switch-label" for="body_type__pickup" data-interaction-element="Switch" data-interaction-type="pickup"><span class="switch-label-title"><span class="switch-label-with-icon"><span class="switch-icon switch-icon-pickup"></span>سيارة تجارية</span></span></label></div></div>
</div>
</div>
</div>
<div class="tab">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h2 style="font-weight:800;">ما أنواع الأجسام التي قد تفكر فيها لسيارتك الجديدة؟</h2>    
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 descriptiontext">
<p>    
اختيار العديد كما تريد    
</p>
</div>
</div>
<div style="height:20px;"></div>
<div class="row">
<ul class="list-unstyled search-steps__switch-multi-column-list">
<div class="col-sm-12 col-md-4 col-lg-4">    
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__navigation" name="feature__navigation" type="checkbox" value="navigation"><label class="switch-label" for="feature__navigation" data-interaction-element="Switch" data-interaction-type="navigation"><span class="switch-label-title">نظام تحديد المواقع العالمي</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4"> 
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__parking-sensors" name="feature__parking-sensors" type="checkbox" value="parking-sensors"><label class="switch-label" for="feature__parking-sensors" data-interaction-element="Switch" data-interaction-type="parking-sensors"><span class="switch-label-title">مجسات وقوف السيارات</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4"> 
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__parking-camera" name="feature__parking-camera" type="checkbox" value="parking-camera"><label class="switch-label" for="feature__parking-camera" data-interaction-element="Switch" data-interaction-type="parking-camera"><span class="switch-label-title">كاميرا الرؤية الخلفية</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__climate-control" name="feature__climate-control" type="checkbox" value="climate-control"><label class="switch-label" for="feature__climate-control" data-interaction-element="Switch" data-interaction-type="climate-control"><span class="switch-label-title">التحكم في المناخ</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__cruise-control" name="feature__cruise-control" type="checkbox" value="cruise-control"><label class="switch-label" for="feature__cruise-control" data-interaction-element="Switch" data-interaction-type="cruise-control"><span class="switch-label-title">مثبت السرعة</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__heated-cooled-seats" name="feature__heated-cooled-seats" type="checkbox" value="heated-cooled-seats"><label class="switch-label" for="feature__heated-cooled-seats" data-interaction-element="Switch" data-interaction-type="heated-cooled-seats"><span class="switch-label-title">مقاعد ساخنة / مبردة</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__leather-seats" name="feature__leather-seats" type="checkbox" value="leather-seats"><label class="switch-label" for="feature__leather-seats" data-interaction-element="Switch" data-interaction-type="leather-seats"><span class="switch-label-title">مقاعد جلدية</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__touchscreen" name="feature__touchscreen" type="checkbox" value="touchscreen"><label class="switch-label" for="feature__touchscreen" data-interaction-element="Switch" data-interaction-type="touchscreen"><span class="switch-label-title">نظام معلومات وترفيه بشاشة تعمل باللمس</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__apple-carplay" name="feature__apple-carplay" type="checkbox" value="apple-carplay"><label class="switch-label" for="feature__apple-carplay" data-interaction-element="Switch" data-interaction-type="apple-carplay"><span class="switch-label-title">أبل كاربلاي</span></label></div></div></li>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">     
    <li class="search-steps__switch-list-item"><div class="switch"><div class="checkbox switch__checkbox"><input class="switch-input" id="feature__android-auto" name="feature__android-auto" type="checkbox" value="android-auto"><label class="switch-label" for="feature__android-auto" data-interaction-element="Switch" data-interaction-type="android-auto"><span class="switch-label-title">أندرويد أوتو</span></label></div></div></li>
</div>    
    </ul>
</div>    
</div>
</div>
</form>
<div class="step-process__footer"><div class="container"><div class="step-process-footer__cta-container"><button type"button" id="prevBtn" onclick="nextPrev(-1)" class="btn btn-secondary btn-short" data-interaction-section="Car discovery" data-interaction-type="Skip step" data-interaction-element="Budget">عودة</button><button type"button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-action btn-short" data-interaction-section="Car discovery" data-interaction-type="Next step" data-interaction-element="Budget">التالى</button></div></div></div>

</body>

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

MR SKB