formTest

for beginner frontend

by Laurel Bruggeman

HTML

<form>
     <div class="row">
         <input type="radio" name="sex" value="male" checked="checked"/>Male
         <br/>
        <input type="radio" name="sex" value="female"/>Female
    </div>       
     <div class="row">
         <select id="dateTime">
             <option name="datetime" value="">Pick one</option>
             <option name="datetime" value="date">Date</option>
             <option name="datetime" value="time">Time</option>
         </select>
     </div>
     <div class="row date is-hidden">
         Date: <input type="date" name="bday"/>
         <div class="small">This doesn't work in IE or FF</div>
     </div>
     <div class="row time is-hidden">
         Time: <input type="time" name="time"/>
         <div class="small">This doesn't work in IE or FF</div>
     </div>
         
</form> 
         
         <!-- Cross-platform compatible (Android + iPhone) -->
<div>Phone Number example:</div>
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

CSS

form{
    margin: 20px 0;
}
.small{
    font-size: 0.8em;
}
.row{
    margin-bottom: 10px;
}
.is-hidden{
    display:none;
}
a[href^=tel]{
    color: red;
    text-decoration: none;
}

JavaScript

var jQuery = $.noConflict();
jQuery('#dateTime').change(function(e){
    showDateTime();
});
     
function showDateTime(){
    var e = document.getElementById("dateTime");
    var val = e.options[e.selectedIndex].value;
    var showElements = document.getElementsByClassName(val);
    var hideElements = document.getElementsByClassName('is-hidden');
    //hide all
    for(var i=0; i<hideElements.length; i++){
        hideElements[i].style="display:none";
    }
    //just show one
    for(var i=0; i<showElements.length; i++){
        showElements[i].style = "display:block";
    } 
}