Final Lab

by anandhinava

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<form action="/echo/html/" method="POST">
    <input type="text" name="From" list="cities" placeholder="Orig" autofocus />
    <input type="text" name="To" list="cities" placeholder="Dest" autofocus />
    <label for="from">From</label>
    <input type="text" id="from" name="from" />
    <label for="to">to</label>
    <input type="text" id="to" name="to" />
    <input type="text" name="cxr" list="carriers" placeholder="Carrier" autofocus />
    <input type="number" name="tariff" min="0" max="999" placeholder="tariff" />
    <datalist id="cities">
        <option value="WAS">
            <option value="CHI">
                <option value="LON">
                    <option value="ALT">
                        <option value="LAX">
                            <option value="SFO">
    </datalist>
    <datalist id="carriers">
        <option value="AA">
            <option value="BA">
                <option value="UA">
                    <option value="US">
                        <option value="AF">
                            <option value="CO">
    </datalist>
    <button type="submit">submit</button>
</form>

CSS

form {
    margin: 1em;
}
input, button {
    border: 1px solid silver;
    background: white;
    padding: 5px;
    margin-bottom: 1em;
    display: block;
}
button {
    background: grey;
    color: #fff;
    font-weight: bold;
}
button:not([disabled]) {
    background: green;
}

JavaScript

$("#submit").click(function () {

          $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            //data: '45'
            data: {
                json: JSON.stringify({
                    o: $("#From").val(),
                    d: $("#To").val(),
                    e: $("#from").datepicker().val(),
                    f: $("#from").datepicker().val()
                })
            }
        }).done(function (data) {
            console.log("clicked3");
            console.log(data.o);
            $("#response").text("You entered: " + data.o.toUpperCase() + " " + data.d.toUpperCase() + " " + data.e);
        });
    }

Modernizr.load(
[{
    test: Modernizr.input.placeholder,
    nope: ['https://raw.github.com/jamesallardice/Placeholders.js/master/lib/utils.js', 'https://raw.github.com/jamesallardice/Placeholders.js/master/lib/main.js'],
    complete: function () {

        $(function () {
            $("#from").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#to").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 3,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                }
            });
        });

    }
}, {test: Modernizr.input.list,
nope: 'https://raw.github.com/thgreasi/datalist-polyfill/master/js/modernizr.custom.95515.js'}
]);