JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div class="nav_left">
    <form id="frm" action="#" method="post">
        <table>
            <tbody>
                <tr>
                    <td colspan="2">
                        <h2 id="title">Add Time Group</h2>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input name="action" id="action" value="add" type="hidden">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <h5>Time Group<hr></h5>
                    </td>
                </tr>
                <tr>
                    <td><a href="#" id="titleLink" title="This will display as the name of this Time Group." class="info">Description</a>
                    </td>
                    <td>
                        <input name="description" id="description" size="35" tabindex="1" value="" type="text">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <h5>New Time<hr></h5>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table id="timeTB"
                            <tbody>
                                <tr>
                                    <td>Time to start:</td>
                                    <td>
                                        <select name="hour_start">
                                            <option value="" selected="">-</option>
                                            <option value="01">01</option>
                                            <option value="2">02</option>
                                            <option value="3">03</option>
                                            <option value="4">04</option>
                                            <option value="05">05</option>
                                            <option value="06">06</option>
 ...

CSS

input {
    background: #fafafa none repeat scroll 0 0;
    border-color: #999 #ccc #ccc #999;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    color: #333333;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    height: 24px;
    text-decoration: none;
}
input[type="text"] {
    border-radius: 5px;
    height: 22px;
}
A {
    color: #0000ff;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 100%;
}
SELECT {
    background-color: #fafafa;
    border: 1px solid #bcbcbc;
    border-radius: 5px;
    color: #333333;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    height: auto !important;
    line-height: normal;
    margin: 0;
    min-height: 24px;
    padding: 0;
    text-decoration: none;
    vertical-align: top;
}
INPUT.submit {
    background-color: #d0d1d0;
    background-position: center top;
    background-repeat: repeat-x;
    border: 1px solid #999999;
    color: #444444;
    font-size: 11px;
    font-weight: normal;
}
a.info {
    border-bottom: 1px dashed;
    text-decoration:none;
    color:black;
}
a.info:hover {
    cursor:help;
    position:relative;
}
a.info[title]:hover:after {
    content: attr(title);
    left:5px;
    border: 1px solid #FF6600;
    padding: 2px;
    background:#fae9a3;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 12px;
    font-size: 10px;
}
.rnav {
    float: left;
    position:absolute;
}
.rnav ul {
    list-style-type: none;
    margin: 30px 0 0;
    max-height: 35em;
    max-width: 275px;
    overflow: auto;
    padding: 0;
}
.rnav ul li {
    background: #eee none repeat scroll 0 0;
    border: 1px solid #ccc;
    font-size: 14px;
    margin: 2px;
    padding: 2px 10px;
}
.rnav ul li a {
    display: block;
    text-decoration:none;
}
.nav_left {
    float:left;
    margin:30px 30px 30px 180px;
    background: #eee none repeat scroll 0 0;
   ...

JavaScript

function frm_onsubmit() {
    if (document.getElementById("description").value == "") {
        return false; // stop submission
    }
    return true; // allow submission

}
window.onload = function () {
    document.getElementById("frm").onsubmit = frm_onsubmit;
    document.getElementById("titleLink").onclick = function () {
        document.getElementById("description").focus(); // or whatever
        return false; // instead of javascript:void
    }

    document.getElementById("clone").onclick = function () {
        var tb = document.getElementById("timeTB");
        var allTBs = tb.querySelectorAll("tbody");
        var fields = allTBs[allTBs.length-1].getElementsByTagName("select");
        var empty = false;
        for(var i=0;i<fields.length;i++) {
            if (fields[i].selectedIndex<1) {
                empty = true;
                break;
            }
        }
        if (empty) {
            alert("Some selects were left");
        }
        else {
          var tb = document.getElementById("timeTB"),
          clone = tb.querySelector("tbody").cloneNode(true); // copy children too
          tb.appendChild(clone)
        }
        return false;
    }
}