<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://kit.fontawesome.com/4b7f3722ae.js" crossorigin="anonymous"></script> <style> .text-center .btn-info { margin-top: 30px; color: #FFF; transition: .5s; } .text-center .btn-info:hover { background-color: #FFF; color: #65DAF9; } </style> <div class="container"> <div class="row justify-content-center"> <div class="col-12 col-md-8 col-lg-6 pb-5"> <form action="mail.php" method="post"> <div class="card border-primary rounded-0"> <div class="card-header p-0"> <div class="bg-info text-white text-center py-2"> <h3><i class="fa fa-user"></i> Register</h3> <p class="m-0">Register Form</p> </div> </div> </div> <div class="card-body p-3"> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-user text-info"></i> </div> </div> <input type="text" class="form-control" id="name" name="name" placeholder="name" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-envelope text-info"></i> </div> </div> <input type="email" class="form-control" id="email" name="email" placeholder="ex@email.com" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-phone text-info"></i> </div> </div> <input type="text" class="form-control" id="phone" name="phone" placeholder="phone" maxlength="15" required> </div> </div> <div class="form-group"> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fas fa-map-marker-alt text-info"></i> </div> </div> <input type="text" class="form-control" id="address" name="address" placeholder="address" required> </div> </div> <div class="form-group"> <div class="row"> <div class="col-md-6"> <label for="state">State</label> <select name="state" id="state" class="form-control"> <option>State</option> <option value="sp">São Paulo</option> <option value="rj">Rio de Janeiro</option> <option value="mg">Minas Gerais</option> </select> </div> <div class="col-md-6"> <label for="city">City</label> <select name="city" id="city" class="form-control"></select> </div> </div> </div> <div class="text-center"> <input type="submit" value="Post" class="btn btn-info btn-block rounded-0 py-2"> </div> </div> </form> </div> </div> </div> <div class="text-center"> <a href="https://github.com/DanielmGomes" id="copy">Daniel Gomes © 2021</a> </div> <script> /* --- Mask Function --- */ function mask(o,f){ v_obj=o v_fun=f setTimeout("exMask()",1) } function exMask(){ v_obj.value=v_fun(v_obj.value) } function mtel(v){ v=v.replace(/\D/g,""); //remove everything I don't type v=v.replace(/^(\d{2})(\d)/g,"($1) $2"); //put parentheses around the first two digits v=v.replace(/(\d)(\d{4})$/,"$1-$2"); //hyphen between the fourth and fifth digits return v; } function id( el ){ return document.getElementById( el ); } window.onload = function(){ id('phone').onkeyup = function(){ mask( this, mtel ); } } /* --- State & City Function --- */ /* --- search states and cities --- */ const state = document.querySelector('#state') const city = document.querySelector('#city') const wrapperCities = document.querySelector('#wrapper-cities') const removeChild = (el) => { while (el.firstChild) { el.removeChild(el.firstChild); } } const hideElement = el => el.style.display = 'none' const showElement = el => el.style.display = '' city.disabled=true state.addEventListener('change', e => { city.disabled = false removeChild(city) if(e.target.value === state.value){ statesAndCities.map( data => { data[e.target.value].map( cities => { const option = document.createElement("option") const value = option.value = cities; const text = option.text = cities; city.add(option); }) }) } }) const statesAndCities = [{ /* --- cities of state sao paulo */ 'sp': [ 'São Paulo', 'Taubaté', 'São José dos Campos' ], /* --- cities of state rio de janeiro --- */ 'rj': [ 'Rio de Janeiro', 'Arraial do Cabo', 'Barra Mansa' ], /* --- cities of state minas gerais --- */ 'mg': [ 'Belo Horizonte', 'Baependi', 'Caxambu' ] }] </script>