JezK

Edit File: addBusiness.php

<?php include("header.php");?>
<section class="dashboard-counts section-padding">
    <div class="container-fluid bg-white px-5 py-3">
      <div class="row bg-white">
        <div class="container text-dark">
          <div class="row justify-content-center align-items-center">
            <div class="mb-4">
              <form runat="server">
                <img id="profileImage" src="img/avatar-7.jpg" width="100px" height="100px"  alt="your image" class="uploadImg"><br>
                <label for="profilePicture" class="btn btn-primary  browsePic">Browse Photo</button>
                <input type="file" id="profilePicture" name="profilePicture" class="d-none" accept="image/*" >
              </form>
            </div>
          </div>
            <form action="" method="POST">
              <div class="row">
                <div class="col-12 col-sm-8 col-md-8 col-lg-6 col-xl-6">
                  <div class="form-group">
                    <label for="businessName" class="fieldName">Business Name</label>
                    <input type="text" class="form-control formField-control" name="businessName" id="businessName">
                  </div>
                  <div class="form-group">
                    <label for="Profession" class="fieldName">Profession</label>
                    <input type="text" class="form-control formField-control" name="Profession" id="Profession">
                  </div>
                  <div class="form-group">
                    <label for="phone" class="fieldName">Mobile Number</label>
                    <input type="tel" class="form-control formField-control" name="phone" id="phone"  maxlength="15" autocomplete="off" autofocus onkeypress="return number(event)" onblur="return number(event)" />
                  </div>
                  <div class="form-group">
                    <label for="username" class="fieldName">Username</label>
                    <input type="text" class="form-control formField-control" name="username" id="username">
                  </div>
                  <div class="form-group">
                    <label for="login-as" class="fieldName">Plan</label>
                    <select class="form-control formField-control filterby" >
                      <option>Option 1</option>
                      <option>Option 2</option>
                    </select>
                  </div>
                  <div class="form-group">
                      <input type="checkbox" id="test3" >
                      <label for="test3" class="fieldName pt-1">I agree to <span class="fieldName-forgot">Terms</span> & <span class="fieldName-forgot">Privacy policy</span></label>
                  </div>
                </div>
                <div class="col-12 col-sm-8 col-md-8 col-lg-6 col-xl-6">
                  <div class="form-group">
                    <label for="owner" class="fieldName">Owner</label>
                    <input type="text" class="form-control formField-control" name="owner" id="owner">
                  </div>
                  <div class="form-group">
                    <label for="email" class="fieldName">Email ID</label>
                    <input type="text" class="form-control formField-control" name="email" id="email">
                  </div>
                  <div class="form-group">
                    <label for="location" class="fieldName">Location</label>
                    <input type="text" class="form-control formField-control" name="location" id="location">
                  </div>
                  <div class="form-group">
                    <label for="password" class="fieldName">Password</label>
                    <div>
                      <input id="password-field" type="password" class="form-control formField-control pwd" name="password" >
                      <span toggle="#password-field" class="showHide field-icon toggle-password fieldName-forgot" id="show" onclick="showPassword()">Hide</span>
                  </div>
                  <div class="form-group mt-2 pt-1">
                      <label></label>
                      <button class="btn basic-btn-color w-100">Register</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
</section>

<?php include("footer.php");?>
<script>

function readURL(input,id) {

if (input.files && input.files[0]) {
  var reader = new FileReader();

reader.onload = function(e) {
	$('#'+id).attr('src', e.target.result);
  }

reader.readAsDataURL(input.files[0]);
}
}

$("#profilePicture").change(function() {
readURL(this, 'profileImage');
});
$("#backgroundPicture").change(function() {
readURL(this, 'backgroundImage');
});

</script>
<script>
$(".toggle-password").click(function() {

$(this).toggleClass("showHide");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
  input.attr("type", "text");
  document.getElementById("show").innerHTML = "Show";
} else {
  input.attr("type", "password");
  document.getElementById("show").innerHTML = "Hide";
}
});

var input = document.querySelector("#phone"),
  output = document.querySelector("#output");

var iti = window.intlTelInput(input, {
  nationalMode: true,
  separateDialCode: true,
  utilsScript: "build/js/utils.js" // just for formatting/placeholders etc
});

var handleChange = function() {
  var text = (iti.isValidNumber()) ? "International: " + iti.getNumber() : "Please enter a number below";
  var textNode = document.createTextNode(text);
  output.innerHTML = "";
  output.appendChild(textNode);
};

// listen to "keyup", but also "change" to update when the user selects a country
input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange);
</script>